在悬停时更改表行颜色(jQuery或CSS)
在悬停时更改表行颜色(jQuery或CSS)
提问于 2014-10-28 11:03:14
我的问题是，我已经得到了一些“突出显示”(这意味着他们有自己的背景色来突出显示它们)在我的表中，当我使用代码改变整个行的颜色时，当鼠标悬停在它们上面时，这些单元格不会改变它们的背景色。
对一行进行悬停只会更改没有突出显示的单元格的背景色。
如何修复此问题，使整个行更改背景色？
我有一个HTML表：
$(window).load(function() {
$('#infotable tr').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});#infotable td {
padding:0.7em;
border:#969696 1px solid;
}
.highlight {
background:#DAFFD6;
}
.hover {
background:yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
<thead>
<tr>
<th></th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody id="infotable">
<tr>
<td>Row #1</td>
<td>889 kg</td>
<td class="highlight">151 kg</td>
<td>192 kg</td>
</tr>
<tr>
<td>Row #2</td>
<td>784 kg</td>
<td>15 kg</td>
<td class="highlight">64 kg</td>
</tr>
</tbody>
</table>
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-10-28 11:06:30
您可以单独在CSS中实现这一点。您只需要使:hover规则比td.highlight更具体。试试这个：
#infotable tr:hover td,
#infotable tr:hover td.highlight
{
background:yellow;
}例琴
Stack Overflow用户
发布于 2014-10-28 11:07:01
仅通过更改javascript将类悬停添加到td中的tr中。
$('#infotable tr').hover(function()
{
$(this).find('td').addClass('hover');
}, function()
{
$(this).find('td').removeClass('hover');
});小提琴
Stack Overflow用户
发布于 2014-10-28 11:09:47
只需继承悬停样式，检查此小提琴
.hover, .hover .highlight
{
background:yellow;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26606657
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号