mouseenter mouseleave事件有冲突吗？jQuery的

frankBang 发表于 Dev

坦率的

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

Yogesh Sharma

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。