悬停功能addClass

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

UPDATE

对于更改的标记

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

DEMO