悬停时突出显示元素

Highlight an element on hover

本文关键字：显示 元素 悬停      更新时间：2023-09-26

我想在悬停时突出显示一个元素，并且只突出显示该元素。这应该模拟当您选择了放大镜时，使用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 扩展程序中过于复杂......我不确定

这是你需要的吗？ 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");
});

您需要使用目标元素而不是"this"，这是您将鼠标悬停在上面的实际元素并使用 stopPropagation，以便不对后面的每个元素重复该过程：

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

你可以用css（和js）做到这一点：

*:hover {
    background-color: pink;
}

甚至

div:hover {
    background-color: pink;
}

在 js 中：

$('body').children().each(function() {
    $(this).hover(function() {
        $(".hova").removeClass("hova");     
        $(this).addClass("hova");
    }, function() {
        $(this).removeClass("hova");
    });
});
相关文章：