jquery - 在悬停时突出显示具有多个 div 的 td，取消突出显示其中一个 div

Question

这是对我之前提出的一个问题的扩展。 CSS on hover effect on a <td> does not wok properly if <td> has multiple <div>s inside it

我有一个带有多个div的td，下面是代码

 <td>
  <div style="display:inline-block; border:1px solid red">left</div>
   <div style="display:inline-block">
   <div style="display:inline-block; border:1px solid blue">top left</div>
   <div id="imgMapDiv"style="display:inline-block; border:1px solid green">top right</div>
   <div>bottom </div>  
  </div>
</td>

这是我的CSS

#MyTable td:悬停{ 背景:#cccccc；

我想达到的目标:当我的鼠标进入 TD 时，整个列应该突出显示 - 我有这部分。

但是，当鼠标进入 ID 为 imgMapDiv 的 div 时，因为这是一个超链接，整个 TD 应该不会突出显示。 - 这是我遇到问题的部分。

我尝试了一些 jQuery 方法来切换类 - 但是一旦 TD 失去高亮类，它就再也不会回来了。我在这里寻找仅 CSS 或 CSS javascript、jquery 解决方案。

Answer 1

这是一个示例:
查看我的fiddle我更新了它。
你必须根据你的需要修改它:

$("#imgMapDiv").mouseenter(function(){
  $(this).parents('td').removeClass('someclass');
}).mouseleave(function(){
  $(this).parents('td').addClass('someclass');
});

我用这个trick .
我在 <td class="someclass"> 中添加了一个类
将悬停附加到类 td.someclass:hover { background: #cccccc; }
和 mouseenter()我删除了那个类，然后在 mouseleave()我重新添加它。