只有在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>

​

Answer 2

您可以使用正常的css转换来实现这一效果。试着用这段代码

​

a:hover ~ .show-hide{
        visibility:visible;
        tranistion:all ease-out;
        transition-delay:1.2s;
    }
    .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 3

你能看看这个吗。我只是拿了一面旗子来保持能见度。

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

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