只有在需要使用jquery时隐藏和显示文本

问题描述：

我有一个链接和一些文本。每当我将鼠标悬停在链接上时，文本应该以1200秒的时间间隔显示，并且当我从链接中移除光标时应该立即隐藏。因此，根据我所写的内容，每当我将鼠标悬停在链接上时，文本在1200秒后显示，并且在从链接中移除光标时文本显示后文本隐藏起来，这很好。但每当我将光标放在链接上并在文本显示前从链接中移除光标，文本仍然显示，我不想显示文本。当我从链接中移除光标时，文本应该立即隐藏。只有在需要使用jquery时隐藏和显示文本

有没有办法做到这一点。我提供我写了下面的代码：请看看它，在此先感谢:)

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

你为什么要添加1200seconds..you的超时可以不用太理想的效果？ –

@ZakiMustafa我这样做是为了在1200秒后显示文本。如何在不使用超时的情况下获得相同的效果？ – Harish

答

它正在发生，因为当你将鼠标悬停在它的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>

谢谢，我认为这可能有效。我会试试:) – Harish

它的工作！非常感谢：） – Harish

答

您可以检查此。我只是为了保持知名度而采取了一面旗帜

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>

答

你可以使用正常的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>

只有在需要使用jquery时隐藏和显示文本

相关推荐