Question

$("table.table").hover(function() {
  $('.main-head').toggleClass("hovered");
});

此代码确实有效。虽然它会使我所有的.main-head元素发生变化，但是修改它的方法只能改变最接近的元素吗？我尝试添加一个.closest()甚至一个.each(function(){也许我没有正确地编写它们并且在看到它们不起作用后我把它扔掉了。

有什么建议吗？基本标记（只是写下我的头顶）

<div class="main-head">
   <div class="title">
     <h2>TITLE</h2>
     </div>
</div>
  <div class="main-content">
   <table class="table">
     <tr>
       <td></td>
     </tr>
   </table>
 </div>

Answer 1

$("table.table").hover(function() {
    $(this).closest('.main-head').toggleClass("hovered");
});

DEMO

<强>更新

对于更改的标记

$("table.table").hover(function() {
    $(this).parent().prev('.main-head').toggleClass("hovered");
});

DEMO

Answer 2

如果它是你要切换的第一个元素，那么你可以添加这样的东西;

    $('.main-head:first').toggleClass("hovered");

悬停功能addClass

2 个答案: