在鼠标悬停上更改tr元素的背景颜色

问题描述：

我想让我的表格行在鼠标悬停时突出显示，但是我还没有找到一种方法可以实现不使用Javascript。这在CSS中不可行吗？在鼠标悬停上更改tr元素的背景颜色

我已经试过这样：

tr:hover { 
    background: #000; 
}

但是，这并不工作。使用td:hover的作品，但我想改变整个表格行的背景颜色。

有没有一种纯CSS/HTML的方式来做到这一点，或者我将不得不求助于Javascript？

答

你可以尝试：

tr:hover { 
    background-color: #000; 
} 

tr:hover td { 
    background-color: transparent; /* or #000 */ 
}

JS Fiddle demo。

答

<tr>š本身很难用CSS访问，尝试tr:hover td {background:#000}

完美，谢谢。 – Josh 2011-03-30 22:02:12

+13

如果它是完美的，也许这应该被接受？ – demongolem 2011-08-11 15:00:25

但它不在IE中工作。 – 2013-05-06 12:14:57

答

tr:hover td {background-color:#000;}

答

，您可以给TR的ID并做到这一点。

tr#element{ 
    background-color: green; 
    cursor: pointer; 
    height: 30px; 

} 

tr#element:hover{ 
    background-color: blue; 
    cursor: pointer; 

} 

<table width="400px"> 
<tr id="element"> 
<td></td> 
</tr> 
</table>

答

其很容易。就在你的CSS行的末尾添加重要：

tr:hover { background: #000 !important; }

答

这将工作：

tr:hover { 
    background: #000 !important; 
}

如果你只想在TD应用BG-颜色则：

tr:hover td { 
    background: #c7d4dd !important; 
}

它甚至会覆盖你的给定颜色并强制应用。

在这种情况下不要使用'！important' – 2016-12-02 17:11:53

答

我有同样的问题：

tr:hover { background: #000 !important; }

allone没有工作，但加入

tr:hover td { background: transparent; }

到我的CSS的下一行做的工作对我来说！我的问题是，一些TD已经分配了背景颜色，我不知道我必须将它设置为TRANSPARENT才能使tr：hover工作。

其实，我有一个类名用它：

.trclass:hover { background: #000 !important; } 
.trclass:hover td { background: transparent; }

感谢这些答案，他们让我很快乐！ :)

答

tr:hover td.someclass { 
    background: #EDB01C; 
    color:#FFF; 
}

只是SomeClass的细胞亮点

在鼠标悬停上更改tr元素的背景颜色

相关推荐