将鼠标悬停在同一个类元素上时，更改所有同类元素的CSS

当鼠标悬停在任何单元格上的class =“bg”时，我正在寻找更改class =“bg”的所有单元格的背景颜色”。东西将鼠标悬停在同一个类元素上时，更改所有同类元素的CSS

时间像$('.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>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
     </tr> 
     <tr> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
     </tr> 
    </table> 
    <br /> 
    <table width="100" border="1" cellspacing="0" cellpadding="0"> 
     <tr> 
       <td class="bg">a</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
     </tr> 
     <tr> 
       <td class="bg">a</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
     </tr> 
     <tr> 
       <td class="bg">a</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
     </tr> 
    </table> 
    </body> 
    </html>

编辑：kumiau的工作解决方案后，我意识到，我正在寻找的是更为复杂的。 This is the page I'm working on。悬停在任何孔1单元在深灰色部分和全部孔1单元格背景颜色更改。现在

，该网页仅示出1种游戏类型（四球赛最佳球）被1个圆（杜宾/ Kosakewitsch VSDybkjær/拉森），但会有3种类型（四球赛最佳球，双打，碟），6每个都有18个洞。这是324洞！ See last year's tournament here。

所以，呃，这改变了一些事情。我在想，我可以类似地对每个孔单元进行分类（简单地说，class =“hole”），并将数据存储为数据属性（类似于Fourball Best Ball，Round 1的data-hole-id =“fbb_1_4” ，Hole 4），为了使一个更一般的jQ功能？

编辑2：拿到了最后一位在这里jQuery selector madness

来源

2012-03-11 sumsaricum

$('.bg').hover(
    function(){ 
    $('.bg').css({"background-color":"blue"}); 
    },function(){ 
    $('.bg').css({"background-color":"white"}); 
});

回答更新了提琴：http://jsfiddle.net/kumiau/Nkdny/3/

来源

2012-03-11 13:18:44 kumiau

谢谢，这做的伎俩！只适用于shits＆giggles：我将bgcolor设置在单独的样式表中。使用这个jQ覆盖第一次悬停时的bgcolor，样式表颜色再也不会出现。任何解决方法？（简单地删除第二个悬停功能会使单元格变蓝......） – sumsaricum 2012-03-11 13:27:12

你说得对。最好回到css定义的颜色。我更新了小提琴http://jsfiddle.net/kumiau/Nkdny/4/ – kumiau 2012-03-11 13:36:47

太棒了！在插入并看到它工作之后，我意识到我要找的东西要复杂得多。编辑的问题（相当多） – sumsaricum 2012-03-11 14:10:25

$('.bg').data('bg', $('.bg').css('background-color')).on({ 
    mouseenter: function() { 
     $('.bg').css('background-color', 'cyan'); 
    }, 
    mouseleave: function() { 
     $('.bg').css('background-color', $(this).data('bg')); 
    } 
});

FIDDLE

来源

2012-03-11 13:54:59 adeneo

将鼠标悬停在同一个类元素上时，更改所有同类元素的CSS

回答

相关问题