Question

我有以下代码似乎有效，但现在当鼠标悬停在元素上时它会突出显示所有父代。我所期望的只是我的鼠标所在的元素将有一个框围绕它绘制，当前的解决方案围绕元素和它的所有祖先。

  $("*").hover(
        function(e) { e.stopPropagation(); $(this).stop(true, true).addClass("highlight"); },
        function(e) { e.stopPropagation(); $(this).stop(true, true).removeClass("highlight"); }
   );

的CSS：

.highlight {
-moz-box-shadow: inset 0 0 5px 5px #FF00FF;
-webkit-box-shadow: inset 0 0 5px 5px #FF00FF;
box-shadow: inset 0 0 5px 5px #FF00FF;
}

这是正在发生的事情，即使我的鼠标没有聚焦在它上面，突出显示的边框仍然“粘住”。

http://jsfiddle.net/NE66P/419/

Answer 1

您需要将传入的事件对象用作悬停函数的第一个参数，以阻止事件传播。我还没有测试过，但它应该可以工作：

$(document).ready(function() {
    $("*").hover(
        function(e) { e.stopPropagation(); $(this).addClass("Hover"); },
        function(e) { e.stopPropagation(); $(this).removeClass("Hover"); }
    );
});

Answer 2

使用纯CSS而不使用任何JavaScript。

table:hover {
    border: 1px solid #000;
}

或者您希望将其应用于表格单元格（<td>），而不是整个表格，请执行以下操作：

table td:hover {
    border: 1px solid #000;
}

Answer 3

为什么不使用纯CSS？

*:hover
{
  //some code
}

table:hover 
{ 
  border: 1px solid #000; 
}

只突出显示所选元素，而不是其父母？

3 个答案: