mouseenter mouseleave 事件冲突？ jQuery答案

【问题标题】：mouseenter mouseleave events conflict ? jquerymouseenter mouseleave 事件冲突？ jQuery
【发布时间】：2016-04-03 00:36:49
【问题描述】：

我正在尝试在 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/

【问题讨论】：

一切正常。（你没有包括 jquery）jsfiddle.net/dtkbf5r8/1
这是 hepnning 因为你同时应用了 $(this).css("display", "none"); $(this).fadeIn("slow");请使用其中之一
对不起，我忘了在 jsfiddle 中包含 jquery，但这不是问题。一旦您将鼠标悬停在最后两个元素之一上，您就会注意到我指的是什么。
这两行的用途是什么，您的要求很简单，悬停文本应该改变，离开它应该再次改变？
感谢 Yogesh Sharma 指出问题。我不知何故在我的脑海中必须先隐藏文本，然后才能将其淡入。 - 这解决了问题。

标签： jquery html events mouseover mouseleave

【解决方案1】：

用于.hover jQuery

将一个或两个处理程序绑定到匹配的元素，当鼠标指针进入和离开时执行> 元素

像这样

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

【讨论】：

这也很好。在不推荐使用悬停之前，我已经阅读过，但现在我检查了结果证明是错误的 API。我不得不说它有点难以阅读，如果有人不知道第一个函数是用于 mouseenter 而第二个函数用于 mouseleave。

【解决方案2】：

检查下面的解决方案，如果您的要求是在悬停时显示即将到来的文本以及在鼠标离开时显示与之前相同的文本，则不需要 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>

【讨论】：