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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

用于 .hover jQuery

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

就像这样

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

mouseenter mouseleave事件发生冲突？ jQuery的

2 个答案: