仅在必要时使用jquery隐藏和显示文本

Question

我有一个链接和一些文字.每当我将鼠标悬停在链接上时,文本应以1200秒的时间间隔显示,并且当我从链接中移除光标时应立即隐藏文本.因此,根据我所写的内容,每当我将鼠标悬停在链接上时,文本将在1200秒后显示,并且在文本显示后,当我从链接中删除光标时,文本被隐藏,这很好.但每当我将光标放在链接上并在文本显示之前从链接中删除光标时,文本仍然显示,我不想显示.当我从链接中删除光标时,应立即隐藏文本.

有没有办法做到这一点.我提供了下面编写的代码:请看一下,提前谢谢:)

$('a').hover(function(){
    setTimeout(function(){
    $('.show-hide').css("visibility", "visible")}, 1200);
}, 
function(){
     $('.show-hide').css("visibility", "hidden");
});

.show-hide{
  visibility : hidden;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><p> Hover here </p></a>


<p class="show-hide"> This should be shown when hovered </p>

<p class="show-hide"> This should be shown when hovered </p>

Answer 1

它发生的原因是show()当你将鼠标悬停在它上面时执行该功能,即使你在1.2秒之前离开鼠标,你也没有阻止它,它会在延迟完成后显示文本.

你需要在hide()什么时候执行mouseleave.那样它就会停止这个show()功能.试试下面的代码:

$(document).ready(function(){
  $('.show-hide').hide();
  //This is for showing the text with delay 1.2 sec
  $('a').mouseenter(function(){
    $('.show-hide').show(1200);
  });
  //This is for hiding the text with no delay
  $('a').mouseleave(function(){
    $('.show-hide').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><p>Hover here</p></a>

<p class="show-hide"> This should be shown when hovered </p>
<p class="show-hide"> This should be shown when hovered </p>