只有在需要使用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>

來源

2016-12-27 Harish

你爲什麼要添加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>

來源

2016-12-27 05:31:53 ab29007

謝謝，我認爲這可能有效。我會試試:) – 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>

來源

2016-12-27 05:34:17

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

來源

2016-12-27 05:55:51

只有在需要使用jquery時隱藏和顯示文本

回答

相關問題