javascript - 在悬停时突出显示一个元素

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 opacity，以防背景被覆盖，但它似乎总是选择父元素。我想要我悬停在 DOM 上最远的 child 。

我确定那里有一些简单的解决方案，也许它过于复杂，因为它在 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");
});