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

发布于 2024-12-06 04:25:30 字数 331 浏览 0 评论 0原文

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

原文

I have a table where the first cells have a different background. When the TR:hover is applied those cells do not change.

Is there a way to override them when the row is hovered?

#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; 
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一身软味 2024-12-13 04:25:30

尝试

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

一下是的，它有效。

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

try

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

Yep, it works.

Code: http://jsfiddle.net/b9ndZ/1/

回复收藏 0 原文

孤千羽 2024-12-13 04:25:30

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

要让td“释放”他们的背景，您至少有两个选择：

一个：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/
当其父 tr 悬停在 td 上时，将其背景颜色设置为透明。

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

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

table tr:hover {
    background-color: yellow;
}

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

The problem is that the td elements are nested in the tr element, which means that td's background will be "above" the tr's background.

To let the tds "loose" their background you have at least two options:

One: http://jsfiddle.net/mqchen/WXvkk/
Using the :not() pseudo selector you can set the td's background only when the user isn't hovering over the tr. Downside with this is that :not() only works in some browsers (IE) if you use e.g. http://selectivizr.com/

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

table tr:hover {
    background-color: yellow;
}

Two: http://jsfiddle.net/mqchen/zPGW9/
Set the td's background color to be transparent when it's parent tr is hovered over.

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

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

table tr:hover {
    background-color: yellow;
}

The advantage of these solutions vs. that by Samich is that this will also work where the parent element's background not a solid color, eg. a graphic, gradient, etc.

回复收藏 0 原文

~没有更多了~