Question

我有关于悬停功能的问题。我有一个例子：<a href="http://jsfiddle.net/sushanth009/YeBMA/1/">Click here </a>

$('.curtain').hover(function() {
  var $container = $(this).closest('div.container');
  $container.find('.containerLeft').addClass('lefthover');
  $container.find('.containerRight').addClass('righthover');
}, function() {
  var $container = $(this).closest('div.container');
  $container.find('.containerLeft').removeClass('lefthover');
  $container.find('.containerRight').removeClass('righthover');
});

.lefthover {
  border: 2px solid green;
}
.righthover {
  border: 2px solid orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
  <img class="curtain containerRight" src="http://example.com/containerright.jpg" />
</div>
<div class="container">
  <img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
  <img class="curtain containerRight" src="http://example.com/containerright.jpg" />
</div>
<div class="container">
  <img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
  <img class="curtain containerRight" src="http://example.com/containerright.jpg" />
</div>

我将鼠标悬停在图片上，我想添加一个类然后将其删除，但该类会自动添加几次，而不是。

你能帮忙吗？

Answer 1

用这个替换你的jQuery代码并检查

$('.curtain').hover(function() {
  var $container = $(this).parent('.container');
  $container.children('.containerLeft').addClass('lefthover');
  $container.children('.containerRight').addClass('righthover');
}, function() {
  var $container = $(this).parent('div.container');
  $container.children('.containerLeft').removeClass('lefthover');
  $container.children('.containerRight').removeClass('righthover');
});

我希望你能得到答案，你可以在fiddle

上查看

Answer 2

发生这种情况的原因是b / c悬停功能如此快速地触发，主要是在使用mouseenter和mouseleave时，这使得jquery的hover功能正常运行

我一直使用这个名为 hoverIntent 的插件。你可以找到它here。基本上这个插件的作用是计算像素（从鼠标移动到＆＃34;区域＆＃34;，以及它是否在一段时间内移出该区域）。这些计算将停止事件（悬停）多次触发，并且仅在用户实际悬停预定时间量时触发它（取决于您传入的选项）。您可以更改所有这些选项并将其传递到插件的初始化。

这已经存在多年了，并且已经为我节省了很多次。我强烈推荐它。

以下是您使用hoverIntent：

的示例

$('.container').hoverIntent({
    selector: '.curtain',   // this is the same as using jquery's `on` event
    sensitivity: 2,  // or w/e number - read docs
    interval: 50, // default is 100
    over: function () {
       var $container = $(this).closest('div.container');
       $container.find('.containerLeft').addClass('lefthover');
       $container.find('.containerRight').addClass('righthover');
    },
    out: function() {
      var $container = $(this).closest('div.container');
      $container.find('.containerLeft').removeClass('lefthover');
      $container.find('.containerRight').removeClass('righthover');
    }
});

悬停问题Jquery库

2 个答案: