jquery - 只高亮选中的元素，而不是它的父元素？

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;
}

这是正在发生的事情的 jsfiddle，即使我的鼠标没有聚焦在高亮边框上，它也会“粘住”。

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"); }
    );
});