鼠标悬停时突出显示元素

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结构中最深层次的子元素。

我相信一定有一个简单的解决方案，可能因为它在Chrome扩展程序中而变得复杂了...我不确定。

- Ben Taliadoros

---

这是你要找的吗？(http://stackoverflow.com/questions/1731280/using-jquery-to-highlight-content-under-cursor) - Rohil_PHPBeginner

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

- artm

Answer 2

您需要使用target元素而非'this'，因为后者是您悬停并使用的实际元素，并且需要使用stopPropagation以避免在每个元素上重复该过程。

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

    e.stopPropagation();

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

- Juan Girini

Answer 3

你可以使用CSS（和JS）来实现这个功能：

*:hover {
    background-color: pink;
}

甚至连

都有可能

div:hover {
    background-color: pink;
}

在JavaScript中：

$('body').children().each(function() {
    $(this).hover(function() {
        $(".hova").removeClass("hova");     
        $(this).addClass("hova");
    }, function() {
        $(this).removeClass("hova");
    });
});

- jeremyb

---

回答不错，但是在 CSS 解决方案中容器元素仍然被突出显示。 - Ben Taliadoros