mouseenter mouseleave事件冲突？jquery

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

为此，我编写了以下代码

html

该代码在大部分情况下都能正常工作，即在鼠标悬停时更改最后两个元素的文本

但是，如果一个鼠标悬停在其中两个上方以快速移动，则文本不会按预期更改，也不会显示任何文本

为什么会这样？有什么解决办法

多谢各位

---

检查下面的解决方案，不需要显示：如果您的要求是在悬停时显示即将出现的文本，并且在鼠标离开时显示与前面相同的文本，则无需显示。-

$safed_text=”“；
$（'.inactive'）。在（'mouseenter'，function（）上{
$safed_text=$（this.text（）；
$（this.css（“字体大小”，“0.7em”）；
$（此）.text（“即将提交…”）；
//$（this.css（“显示”、“无”）；
美元（这个）.fadeIn（“慢”）；
});
$（'.inactive'）。在（'mouseleave'，function（）上{
$（this.css（“字体大小”，“1em”）；
$（this）.text（$safed_text）；
}); 






用于jQuery

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

像这样


$（“.inactive”）。悬停(
函数（）{
safed_text=$（this.text（）；
$（this.css（“字体大小”，“0.7em”）；
$（此）.text（“即将提交…”）；
美元（这个）.fadeIn（“慢”）；
}，函数（）{
$（this.css（“字体大小”，“1em”）；
$（此）.text（安全文本）；
}
);
nav{
宽度：100%；
}
导航ul{
保证金：0；
填充：0；
列表样式类型：无；
文本对齐：居中；
/*边框：1px纯黑*/
背景：#F1F0D1
}
李国荣{
显示：内联块；
/*边框：1px实心#878E63*/
宽度：15%；
}
海军ulli a{
文字装饰：无；
}
海军ulli a p{
背景#F1F0D1；
显示：块；
填充物：5%12%；
字体大小：粗体；
字号：1em；
颜色：#878E63；
文字装饰：无；
文本对齐：居中；
}
导航ulli a p:悬停{
背景色：#878E63；
颜色：#F1F0D1；
}






它工作正常。（您没有包括jquery）这是hepning，因为您同时应用了$（This.css（“display”，“none”）$（本节）fadeIn（“慢”）；请使用其中之一抱歉，我忘了在JSFIDLE中包含jquery，但这不是问题所在。当你在最后两个元素中的一个元素上来回悬停时，你会注意到我指的是什么。这两行的用法是什么，你的要求很简单，悬停文本应该更改，而在离开时它应该再次更改？感谢Yogesh Sharma指出问题。不知怎的，在我的脑海中，我必须先隐藏文本，然后才能淡入这解决了问题。这也很好。我之前读过，hover被弃用了，但现在我检查了API，结果证明是错误的。如果你不知道第一个函数是mouseenter的，第二个是mouseleave的，我不得不说这有点难读。
<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>

    $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);

    });