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

【问题标题】：Highlight a td with mulitple div on hover, unhighlight on one of the divs在悬停时突出显示具有多个 div 的 td，取消突出显示其中一个 div
【发布时间】：2013-04-08 03:18:02
【问题描述】：

这是对我之前提出的问题之一的扩展。 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:hover { 背景：#cccccc； }

我想要实现的目标：当我的鼠标进入 TD 时，应该突出显示整个列 - 我已经得到了这部分。

但是，当鼠标进入 id 为 imgMapDiv 的 div 时，因为那是一个超链接，整个 TD 应该是不高亮的。 - 这是部分，我有问题。

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

【问题讨论】：

标签： jquery css toggle highlight

【解决方案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() 上重新添加它。

【讨论】：

when the mouse gets in the div with id imgMapDiv，不只是任何<div>
为我工作。很好的解决方案。谢谢

【解决方案2】：

你尝试过哪些 jQuery 方法？您是否尝试过 jQuery 的 mouseenter() 和 mouseleave() 为内部 div 设置处理程序？您可以通过parents('td') 访问内部 div 的 mouseleave() 来恢复 TD 的类。

【讨论】：

感谢@Ezze 的回复。我没有尝试mouseenter和mouseleave。相反，我尝试了内联 css/js mouseover 和 mouseout 事件，并在这些事件上切换类。但是，出现了一些问题，因此我无法使其正常工作。