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

标签 jquery css

我希望在悬停带有 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 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/

相关文章:

javascript - 为什么淡入和动画不同时发生?

css - 添加此共享插件模式的自定义样式

css 背景图像不会显示

Javascript - Jquery 不显示表单中传递的值

php - 为一个 div 回显多个 css 类

javascript - jQuery 可选择阻止点击事件传播

javascript - 在选择标签中仅显示一次选项

jquery - 使用处理程序删除元素时的最佳实践是什么?

javascript - (window).unload 函数永远不会在 jQuery 中被调用

关于 FLOAT 的 HTML