鼠标悬停时添加类

Question

我这里有一个情况，我需要为我悬停的元素添加一些边框。我正在使用 Jquery，我在这里搜索了类似的问题，但都有一个特定的选择器，如 $(".myClass") 或 $("#myId")。但我的是$("*")。我的代码正在运行，但问题是如果我在另一个元素中有一个元素，则两个元素都有我添加的类。而且我只需要将类添加到我输入的元素中。

这是 HTML，是一个基本示例，因为元素的 ID 可能会改变。

<div id="first">
    <div id="second">
        <h2>TESTING MOUSE OVER</h2>
    </div>
</div>

CSS

#first{
    background-color: red;

    padding:50px;
}
#second{
    background-color: blue;
    text-align: center;

}
.over{
    border: 2px dashed black;
}

还有 Jquery

$(document).ready(function(){
    $("body *").mouseover(function(){
        $(this).addClass("over");
    });
    $("body *").mouseleave(function(){
        $(this).removeClass("over");
    });
});

这是一个例子： http://jsfiddle.net/k4y00sa2/ 我希望我说清楚了。 谢谢

Answer 1

使用$("body *") 附加事件处理程序会将处理程序附加到树中的每个元素，因此会损失一些性能，并且不适用于动态添加的元素。最好只附加一次，只委托给 body 元素。

$(document).on("mouseover", "*", function(ev) {
  $(ev.target).addClass("over");
  return false;
});
$(document).mouseout("*", function(ev) {
  $(ev.target).removeClass("over");
});

#first {
  background-color: #ffffce;
  padding: 50px;
}
#second {
  background-color: #eee;
  text-align: center;
  padding: 1em;
}
.over {
  border: 2px dashed black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="first">
  <div id="second">
    <h2>TESTING MOUSE OVER</h2>
  </div>
</div>

Answer 2

你的意思是这样的？ http://jsfiddle.net/k4y00sa2/3/

$("body *").mouseover(function(){
    var cur = $(this);
    $(".over").removeClass("over");
    cur.addClass("over");
    return false;
});

只要存在超类，我就会删除超类。并将其仅放在子元素上，因为如果您将鼠标悬停在内部元素上，这就是遍历的顺序。

Answer 3

所有节点都在处理该事件。在处理完它之后，你需要阻止它冒泡。 通过返回 false，事件不再传播，浏览器也不再处理它。

$("body *").mouseover(function(){
    $(this).addClass("over");
    return false;
});

check it

Returning false in events is a shortcut for:

ev.preventDefault();
ev.stopPropagation();

Answer 4

不确定您在寻找什么。似乎您只需按类或类型或其他方式选择实际元素。但也许这样的事情会有所帮助。如果它的父级已经拥有它，它将不会添加该类。本质上是通过 DOM 跳过其他项目。

$(document).ready(function(){
    $("body *").mouseover(function(){
        if (!$(this).parent().hasClass("over")){
        $(this).addClass("over");
        }
    });
    $("body *").mouseleave(function(){
        $(this).removeClass("over");
    });
});