Question

我必须在导航栏上显示一些内容（包含8个项目）。

我在导航栏上使用mouseover来显示某组项目。问题是mouseover太快了。有没有办法推迟这个事件？我只是想在鼠标上显示一些div（带数据）。

请注意我想在鼠标悬停时显示我的div并在鼠标离开时隐藏我的div。请建议我如何在鼠标事件中使用它？

我的示例代码： $（document）.on（＆＃39; mouseover＆＃39;，＆＃39; .menu＆＃39;，function（argument）{ $（this）.find（＆＃39;。drop-down＆＃39;）。css（＆＃39; display＆＃39;，＆＃39; block＆＃39;）; }）; $（document）.on（＆＃39; mouseout＆＃39;，＆＃39; .menu＆＃39;，function（argument）{ $（this）.find（＆＃39;。drop-down＆＃39;）。css（＆＃39; display＆＃39;，＆＃39; none＆＃39;）; }）

Answer 1

你可以使用delay（）函数，它可以帮助你获得所需的结果，这是语法，

cdecl> explain const void *(*b[])(int , char (*(*)(char ))(double))
declare b as array of pointer to function (int, pointer to function (char) returning pointer
to function (double) returning char) returning pointer to const void

delay（）方法设置一个计时器来延迟队列中下一个项目的执行。

这里有一个非常好的延迟函数示例 - jQuery delay() Method

Answer 2

使用setTimeout进行延迟（不仅对于jquery，由于可能取消执行，它优于delay）。以下是菜单的示例：

timer = setTimeout(function(){
    $this.find('.drop-down').show();
    timer = null;
    }, 400);

var timer;
var timerOut;

$(document).ready(function(){
  $('.menu').on('mouseover', function(){
    var $this = $(this);
    // clear existing timer to prevent showing another dropdown
    if(timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function(){
      $this.find('.drop-down').show();
      timer = null;
    }, 400);
  });
  $('.menu').on('mouseout', function(){
    var $this = $(this);

    timerOut = setTimeout(function(){
      $this.find('.drop-down').hide();
      timer = null;
    }, 400);
  });
});

.menu{
  font-size:14px;
  background: lightgreen;
}
.drop-down{
  display:none;
  font-size:12px;
  padding-left:10px;
  background: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <a>Menu1</a>
  <div class="drop-down">drop1.1</div>
  <div class="drop-down">drop2.1</div>
</div>
<div class="menu">
  <a>Menu2</a>
  <div class="drop-down">drop1.2</div>
  <div class="drop-down">drop2.2</div>
</div>

鼠标悬停在jquery事件上太快了

2 个答案: