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转换来实现此效果。尝试使用此代码，

＆＃13;

a:hover ~ .show-hide{
        visibility:visible;
        tranistion:all ease-out;
        transition-delay:1.2s;
    }
    .show-hide{
      visibility:hidden;
     }

＆＃13;

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

＆＃13;

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>

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

3 个答案: