用 TR:hover 覆盖 TD:first-child？

Posted 2023-03-06

【中文标题】用 TR:hover 覆盖 TD:first-child？

【英文标题】：Override TD:first-child with TR:hover?

【发布时间】：2011-11-23 02:04:48

【问题描述】：

我有一个表格，其中第一个单元格具有不同的背景。应用 TR:hover 时，这些单元格不会改变。

当行悬停时有没有办法覆盖它们？

#spreadsheet TABLE, #spreadsheet TH, #spreadsheet TD  
  border:1px solid #CCC;


#spreadsheet TABLE TR:hover  
  background:#BAFECB !important;


#spreadsheet TD:first-child  
  background:#fff; 
  white-space:nowrap; 

【参考方案1】：

试试

#spreadsheet TABLE TR:hover TD  background:#BAFECB !important; 

是的，它有效。

代码：http://jsfiddle.net/b9ndZ/1/

【讨论】：

没有 !important 也可以工作！

@jerrygarciuh：问题不在于!important，而在于tr 和td。你根本不需要!important。

【参考方案2】：

问题在于td 元素嵌套在tr 元素中，这意味着td 的背景将“高于”tr 的背景。

要让tds “松散”他们的背景，您至少有两个选择：

一个：http://jsfiddle.net/mqchen/WXvkk/ 使用:not() 伪选择器，您可以仅在用户未将鼠标悬停在tr 上时设置td 的背景。这样做的缺点是:not() 仅适用于某些浏览器（IE），如果您使用例如http://selectivizr.com/

table tr:not(:hover) td:first-child 
    background-color: #eee;


table tr:hover 
    background-color: yellow;

两个：http://jsfiddle.net/mqchen/zPGW9/ 将 td 的背景颜色设置为透明，当它的父 tr 悬停在上面时。

table td:first-child 
    background-color: #eee;


table tr:hover td:first-child 
    background-color: transparent;


table tr:hover 
    background-color: yellow;

这些解决方案与 Samich 解决方案相比的优势在于，这也适用于父元素的背景不是纯色的情况，例如。图形、渐变等。

【讨论】：

谢谢。我觉得我现在更好地理解了这个问题。感谢您花时间做出详尽的解释！