悬停特性，如何使用css处理与js代码相同的结果
悬停特性，如何使用css处理与js代码相同的结果
提问于 2011-10-26 13:04:55
如果我有一个表
<table border="1" id="my_table">
<tr>
<td> data-1</td>
<td> data-1</td>
<td> data-1</td>
</tr>
<tr>
<td> data-2</td>
<td> data-2</td>
<td> data-2</td>
</tr>
</table>我想为的每一列或行添加悬停背景，即对于悬停行的each <td>，我可以使用javascript来做到这一点，如下所示：
$('#my_table tr').hover(function() {
$(this).children('td').css('background-color', '#330099');
}, function() {
$(this).children('td').css('background-color', '');
});上面的js代码工作得很好，我的问题是如何使用CSS来接近相同的结果？
我试过的是
tr > td:hover{
background-color: #330099;
}但是上面的代码只更改一个<td>的背景色，而不是行中的所有<td>‘。怎么摆脱这个？
我的代码是在这里玩小提琴。
------------------------------------By The Way-----------------------------------
请不要建议我只使用：
tr:hover{background-color: #440099}我知道这是可行的，但出于我的特殊需要，当鼠标悬停在某一行时，我更愿意更改所有<td>的背景色，就像js代码所做的一样。
因为我已经设置了<td>背景，这将把tr:hover特性隐藏在后面，所以我必须显式地更改<td>的背景。
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-10-26 13:07:43
不如：
tr:hover td {background-color: #440099;}http://jsfiddle.net/mM2Ep/
希望有帮助:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7902991
复制相关文章
相似问题
腾讯云开发者
