Question

我试图改变鼠标的背景颜色。

我有这个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的背景颜色

Answer 1

背景不会改变，因为您已在background-color和table.subform2 tr td:first-child中定义了...:last-child。如果仅定义背景颜色或仅在... tr上定义背景颜色，则背景颜色会发生变化。

请参阅中间栏JSFiddle。

将最后一行更改为

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

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

修改后的JSFiddle

Answer 2

您定义background-color为 TD ，这就是为什么它不可见。写得像这样：

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

选中此http://jsfiddle.net/ZrYUJ/2/

Answer 3

编写HTML，因为如果出现问题，可能会导致tr:hover无效。并确保浏览器不老，因为到处都不支持tr:hover。

Answer 4

你应该写

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

代替。因为你已经设置了孩子td的背景颜色。

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

http://jsfiddle.net/DK5x4/

无法在给定样式中设置背景颜色

4 个答案: