mouseenter mouseleave 事件冲突？ jquery

Question

我正在尝试在 jquery 的帮助下为我的导航菜单设置动画。

为此，我编写了以下代码。

html

<nav>
    <ul>
    <li><a href="#"><p class='active'>one</p></a></li>
    <li><a href="#"><p class='inactive'>two </p></a></li>
    <li><a href="#"><p  class='inactive'>three</p></a></li>
    </ul>   
</nav>

jquery

    $safed_text = "";       

    $('.inactive').on('mouseenter',function(){
        $safed_text = $(this).text();
        $(this).css("font-size", "0.7em");
        $(this).text("comming soon...");
        $(this).css("display", "none");
        $(this).fadeIn("slow");
    });

    $('.inactive').on('mouseleave',function(){
        $(this).css("font-size", "1em");
        $(this).text($safed_text);

    }); 

代码的大部分工作都符合预期，即当用鼠标悬停时更改最后两个元素的文本。

但是，如果将鼠标悬停在其中两个上的速度过快，则文本不会按预期更改并且不会显示任何文本。

为什么会这样？有哪些解决方法？

谢谢。

https://jsfiddle.net/dtkbf5r8/

Answer 1

检查以下解决方案，如果您的要求是在悬停时显示即将到来的文本以及在鼠标离开时显示与之前相同的文本，则不需要 display:none。 -

  $safed_text = "";       

    $('.inactive').on('mouseenter',function(){
        $safed_text = $(this).text();
        $(this).css("font-size", "0.7em");
        $(this).text("comming soon...");
        //$(this).css("display", "none");
        $(this).fadeIn("slow");
    });

    $('.inactive').on('mouseleave',function(){
        $(this).css("font-size", "1em");
        $(this).text($safed_text);

    }); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <ul>
    <li><a href="#"><p class='active'>one</p></a></li>
    <li><a href="#"><p class='inactive'>two </p></a></li>
    <li><a href="#"><p  class='inactive'>three</p></a></li>
    </ul>   
</nav>

Answer 2

习惯了.hoverjQuery

将一个或两个处理程序绑定到匹配的元素，当鼠标指针进入[=时执行32=] 和 留下 元素

像这样

$( ".inactive" ).hover(
  function() {
            safed_text = $(this).text();
            $(this).css("font-size", "0.7em");
            $(this).text("comming soon...");
            $(this).fadeIn("slow");
  }, function() {
            $(this).css("font-size", "1em");
            $(this).text(safed_text);
  }
);

nav{
 width:100%; 
}

nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    text-align:center;
    /*border: 1px solid black;*/
    background: #F1F0D1
}

nav ul li{
 display:inline-block;
/* border: 1px solid #878E63; */
 width: 15%;
}
nav ul li a{
 text-decoration: none;
}


nav ul li a p{
 background: #F1F0D1;
 display: block;
 padding: 5% 12%;
 font-weight: bold;
 font-size: 1em;
 color: #878E63;
 text-decoration: none;
 text-align: center;
}

nav ul li a p:hover{
 background-color: #878E63;
 color: #F1F0D1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<nav>
  <ul>
  <li><a href="#"><p class='active'>nueng</p></a></li>
  <li><a href="#"><p class='inactive'>dos </p></a></li>
  <li><a href="#"><p  class='inactive'>drei</p></a></li>
  </ul> 
 </nav>