Question

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

我认为我需要一个JS解决方案，因为伪：hss在css中似乎适用于背景中的所有元素，即容器元素，所以我需要防止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下去。

我确信那里有一些简单的解决方案，也许它在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");
});

Answer 2

您需要使用目标元素而不是'this'，这是您悬停在其上的实际元素，并使用 stopPropagation 以便不重复此过程背后的每个元素：

$('body').children().mouseover(function(e){

    e.stopPropagation();

    $(".hova").removeClass("hova");     
    $(e.target).addClass("hova");
}).mouseout(function(e) {
    $(e.target).removeClass("hova");
});

Answer 3

您可以使用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");
    });
});

突出显示悬停时的元素

3 个答案: