我想在加载页面时将鼠标悬停在.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>

09-10 10:59
查看更多