Question

我有一张表，其中第一个单元格具有不同的背景。当应用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; 
}

Answer 1

尝试

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

是的，它有效。

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

Answer 2

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

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

一个：http://jsfiddle.net/mqchen/WXvkk/
使用:not()伪选择器，只有当用户没有悬停在td上时，才能设置tr的背景。缺点是: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; }的背景颜色设置为透明。

{{1}}

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

覆盖TD：TR的第一个孩子：悬停？

2 个答案: