我想在加载页面时将鼠标悬停在.wrapper div下的所有div上。如何使用jquery做到这一点?
的HTML
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
jQuery的
$('.wrapper').children().each(function(){
$(this).trigger('hover');
});
https://jsfiddle.net/drxvr1hn/
最佳答案
不建议使用.trigger('hover')
,因为它会导致大量最大堆栈超出错误。
在jQuery 1.8中已弃用,在1.9中已删除:名称“ hover”用作字符串“ mouseenter mouseleave”的简写。它为这两个事件附加一个事件处理程序,并且处理程序必须检查event.type以确定该事件是mouseenter还是mouseleave。不要将“ hover”伪事件名称与.hover()方法混淆,该方法接受一个或两个函数。
尝试通过jQuery触发悬停状态是一个非常耗费浏览器/ CPU的过程,并且需要大量重新渲染页面以确保您的调用正确。因此,该功能已被删除,但是对于某些JS是可以实现的,但是几乎可以肯定会导致速度问题和/或堆栈问题,从而导致浏览器崩溃。
一个很好的替代方法是使用如下所示的类:
$(document).ready(function() {
$('.wrapper div').on('mouseover', function() {
$('.wrapper div').addClass('hover');
}).on('mouseleave', function() {
$('.wrapper div').removeClass('hover');
});
});
.wrapper > div {
width: 100%;
height: 20px;
margin-bottom: 20px;
}
.first {
background-color: #468966;
}
.second {
background-color: #FFF0A5;
}
.third {
background-color: #FFB03B;
}
.first.hover {
background-color: #B64926;
}
.second.hover {
background-color: #8E2800;
}
.third.hover {
background-color: #464A66;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>