如何使用jquery依次悬停多个元素? [英] How can I hover multiple elements in order with using jquery?

问题描述

我想在加载页面时将鼠标悬停在.wrapper div下的所有div上.如何使用jquery做到这一点?

I want to hover all div under .wrapper div in order with a delay when the page is loaded. How can I do this with using 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')已被弃用，因为它导致大量的最大堆栈超出错误.

.trigger('hover') has been deprecated as it caused a great deal of maximum stack exceeded errors.

在jQuery 1.8中已弃用，在1.9中已删除:名称悬停"用作字符串"mouseenter mouseleave"的简写.它为这两个事件附加了一个事件处理程序，该处理程序必须检查event.type以确定该事件是mouseenter还是mouseleave.不要将"hover"伪事件名称与.hover()方法混淆，该方法接受一个或两个函数.

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

尝试通过jQuery触发悬停状态是一个非常耗费浏览器/cpu的过程，并且需要对页面进行大量重新渲染以确保您的调用正确.因此，该功能已被删除，但是对于某些JS是可以实现的，但是几乎可以肯定会导致速度问题和/或堆栈问题，从而导致浏览器崩溃.

Trying to trigger the hover state via jQuery is a very browser/cpu intensive process and a lot of re-rendering of a page to ensure that your call is correct. Therefore the ability was removed but is possible with some JS but will almost certainly cause speed issues and/or stack issues which can cause browser crashes.

一个很好的选择是使用如下所示的类:

A good alternative would be to use classes like below:

$(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>

这篇关于如何使用jquery依次悬停多个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！