我希望在悬停带有 class="bg"的任何单元格时更改所有带有 class="bg"的单元格的背景颜色。
像 $('.bg').hover().css("background-color","blue");
之类的东西,然后尝试
使用 .each()
、.mouseover()
,甚至 .siblings()
(虽然我认为这完全不合时宜)但没有结果。
<head>
<style type="text/css">
.bg { background-color:red; }
.bg:hover { background-color:blue; }
</style>
</head>
<body>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="bg">a</td>
<td class="bg">a</td>
<td class="bg">a</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br />
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="bg">a</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="bg">a</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="bg">a</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
编辑:在 kumiau 的工作解决方案之后,我意识到我正在寻找的东西要复杂得多。 This is the page I'm working on .将鼠标悬停在任一深灰色部分中的任何 Hole 1 单元格上,所有 Hole 1 单元格的背景颜色都会发生变化。
现在,该页面仅显示 1 种游戏类型(Fourball Best Ball)和 1 轮(Dubin/Kosakewitsch VS Dybkjær/Larsen),但会有 3 种类型(Fourball Best ball、Foursomes、Singles),每组 6 轮,每组 18 洞。那是324个洞! See last year's tournament here .
所以,咳咳,这改变了很多事情。我在想我可以对每个孔单元进行类似的分类(简单地说,class="hole")并将 HoleID 存储在数据属性中(类似于 Fourball 的 data-hole-id="fbb_1_4"Best Ball, Round 1, Hole 4),为了做一个更通用的jQ函数??
编辑 2:在这里得到最后一点的回答 jQuery selector madness
最佳答案
$('.bg').hover(
function(){
$('.bg').css({"background-color":"blue"});
},function(){
$('.bg').css({"background-color":"white"});
});
更新了你的 fiddle :http://jsfiddle.net/kumiau/Nkdny/3/
关于jquery - 将鼠标悬停在单个同类元素上时更改所有同类元素的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9655250/