0

我试图在鼠标悬停时更改背景颜色。

我有这个 CSS 代码

table.subform{width: 550px}
table.subform tr td{padding: 3px}
table.subform tr td:first-child{text-align: right}
table.subform2{width: 100%}
table.subform2 tr td{padding: 5px;}
table.subform2 tr td:first-child{text-align: right;background-color: #E3E3E3;font-weight: bold;width: 50%;border-bottom: 1px solid #c6c6c6;padding-right: 10px}
table.subform2 tr td:last-child{text-align: left;background-color: #f1f1f1;vertical-align: top}
table.subform2 tr:hover{color: #082;background-color: #FFF}

正如您在最后一行table.subform2 tr:hover中看到的那样，当有人鼠标悬停 TR 时，必须更改完整 TR 的背景颜色

4

4 回答 4

3

背景没有改变，因为你已经background-color在table.subform2 tr td:first-child和中定义了...:last-child。当您不定义背景颜色或... tr仅定义背景颜色时，背景颜色会发生变化。

请参阅JSFiddle，中间列。

将最后一行更改为

table.subform2 tr:hover td{color: #082;background-color: #FFF}

这将选择td元素并相应地更改背景颜色。

修改后的 JSFiddle

于 2013-01-28T08:18:04.763 回答
1

您background-color对它的TD进行了定义，这就是它不可见的原因。像这样写：

table.subform2 tr:hover td{color: #082;background-color: #FFF}

检查这个http://jsfiddle.net/ZrYUJ/2/

于 2013-01-28T08:21:05.273 回答
0

编写您的 HTML，因为如果其中有问题，可能是tr:hover无法正常工作的原因。并确保浏览器不旧，因为tr:hover并非所有地方都支持。

于 2013-01-28T08:19:04.240 回答
0

你应该写

table.subform2 tr:hover td{color: #082;background-color: #FFF}

反而。因为您已经设置了子 td 的背景颜色。

此外 tr:hover 在某些较旧的浏览器中也不起作用。您可以使用 javascript 来解决此问题。

http://jsfiddle.net/DK5x4/

于 2013-01-28T08:20:55.030 回答