我在这里遇到一种情况,我需要为我悬停的元素添加一些边框。我正在用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 *")附加事件处理程序会将处理程序附加到树中的每个元素,因此会损失一些性能,并且不适用于动态添加的元素。最好将它附加一次,仅委托给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>

10-05 20:44
查看更多