jquery - 悬停函数 addClass

Question

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

这段代码确实有效。尽管它使我所有的.main-head元素都发生了变化，但有什么办法可以解决这个问题，只改变最近的元素？我尝试添加 a.closest()甚至 a .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");
}); 

演示

---

更新

对于更改的标记

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

演示

Answer 2

如果它是您想要切换的第一个元素，那么您可以添加类似这样的内容；

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