悬停时突出显示一个元素

Question

我想在悬停时突出显示一个元素，并且仅突出显示该元素。当您选择放大镜时，这应该模仿使用 chrome 开发工具将鼠标悬停在元素上的行为。这是我正在制作的 chrome 扩展。

我想我需要一个JS解决方案，因为css中的伪:hover似乎适用于后台的所有元素，即容器元素，所以我需要防止css中的事件冒泡，据我所知可以不做。

我努力了

$('body').children().mouseover(function(e){
    $(".hova").removeClass("hova");     
    $(this).addClass("hova");
}).mouseout(function(e) {
    $(this).removeClass("hova");
});

-CSS-

.hova {
    background-color: pink;
}

和jquery的hover()，两者也总是选择容器。

我也尝试过使用 css 不透明度，以防背景被覆盖，但它似乎总是选择父元素。我想要我悬停在 DOM 上最远的孩子。

我确信有一些简单的解决方案，也许它在 chrome 扩展中过于复杂......我不确定

Answer 1

这是你需要的吗？http://jsbin.com/vidojamece/1/

不要将类添加到处理程序内的 $(this)，而是将类添加到 e.target (span) 并返回 false，这样它就不会冒泡到 div：

$('body').children().mouseover(function(e){
    $(".hova").removeClass("hova");     
    $(e.target).addClass("hova");
  return false;
}).mouseout(function(e) {
    $(this).removeClass("hova");
});