Question

我希望在使用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>&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。将鼠标悬停在任一深灰色部分和所有 Hole 1 单元格背景颜色中的任何 Hole 1 单元格上。

现在，该页面只显示1种游戏类型（Fourball Best Ball）和1轮（Dubin / Kosakewitsch） VSDybkjær/ Larsen），但将有3种类型（Fourball Best ball，Foursomes，Singles），每轮6个，每个18洞。那是324洞！ See last year's tournament here。

所以，嗯，这会改变一些事情。我想我可以类似地对每个空洞单元格进行分类（简单地说，类=“空洞”）并将 HoleID 存储在数据属性中（对于Fourball，类似于data-hole-id =“fbb_1_4”）最佳球，第1轮，第4洞），以便制作更通用的jQ函数??

编辑2：在这里得到最后一位答案jQuery selector madness

Answer 1

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

更新了你的小提琴：http://jsfiddle.net/kumiau/Nkdny/3/

Answer 2

$('.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

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

2 个答案: