我这里有一个情况,我需要为悬停的元素添加一些边框。我是用 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/ 我希望我说清楚了。 谢谢
最佳答案
使用 $("body *")
附加事件处理程序会将处理程序附加到树中的每个元素,因此会损失一些性能,并且不适用于动态添加的元素。最好附加一次,只委托(delegate)给 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>
关于jquery - 鼠标悬停时添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28228341/