0

这是我之前提出的问题之一的扩展。 如果 <td> 内部有多个 <div>，则 <td> 上悬停效果的 CSS 无法正常工作

我有一个里面有多个 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 解决方案。

4

2 回答 2

1

这是一个示例：
检查我的小提琴 我更新了它。
您必须根据需要对其进行修改：

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

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

于 2013-04-15T21:27:57.627 回答
1

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

于 2013-04-15T21:28:03.827 回答