防止指針移開後的懸停效果

Question

我想在懸停時顯示元素。以下代碼執行此操作。但是有一個問題，如果你將鼠標懸停多次，當光標消失時，元素會一直顯示多次。

將鼠標懸停在演示中多次以瞭解問題。

$('li').hover(function() { 
 
    $(this).find('.box').delay(100).fadeIn(); 
 
}, function() { 
 
    $(this).find('.box').delay(100).fadeOut('fast'); 
 
});

.box { 
 
    color: #FFF; 
 
    width: 200px; 
 
    background: #000; 
 
    position: absolute; 
 
    display: none; 
 
    margin-top: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="images"> 
 
    <li> 
 
    Show 
 
    <div class="box"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu condimentum odio, non congue quam. Cras feugiat nulla at mattis semper. 
 
    </div> 
 
    </li> 
 
</div>

的jsfiddlehttps://jsfiddle.net/e99afrg8/

Answer 1

jQuery的動畫默認情況下排隊。所以，當你快速徘徊和關閉時，所有這些動畫都會排隊，並在停止徘徊後繼續播放。

我建議使用stop()來「在匹配元素上面當前運行的動畫」。

在我的例子，我也選擇以清除隊列，但不跳到當前動畫的結尾。你可能想要試驗這些值，看看你喜歡哪種行爲。

.stop（[clearQueue] [，jumpToEnd]）

$('li').hover(function() { 
 
    $(this).find('.box').stop(true,false).delay(100).fadeIn(); 
 
}, function() { 
 
    $(this).find('.box').stop(true,false).delay(100).fadeOut('fast'); 
 
});

.box { 
 
    color: #FFF; 
 
    width: 200px; 
 
    background: #000; 
 
    position: absolute; 
 
    display: none; 
 
    margin-top: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="images"> 
 
    <li> 
 
    Show 
 
    <div class="box"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu condimentum odio, non congue quam. Cras feugiat nulla at mattis semper. 
 
    </div> 
 
    </li> 
 
</ul>

Answer 2

要顯示鼠標懸停 「秀」 字.box元素，你只需要添加一個CSS規則。

看到這個例子沒有JavaScript。

.box { 
 
    color: #FFF; 
 
    width: 200px; 
 
    background: #000; 
 
    position: absolute; 
 
    display: none; 
 
    margin-top: 50px; 
 
} 
 

 
li:hover .box { 
 
    display: block; 
 
}

<div id="images"> 
 
    <li> 
 
     Show 
 
     <div class="box"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu condimentum odio, non congue quam. Cras feugiat nulla at mattis semper. 
 
     </div>  
 
     </li> 
 
</div>

Answer 3

您可以只使用CSS來做到這一點

.box { 
 
    color: #FFF; 
 
    width: 200px; 
 
    background: #000; 
 
    position: absolute; 
 
    display: none; 
 
    margin-top: 50px; 
 
} 
 

 
li:hover .box{ 
 
    display: block; 
 
}

Answer 4

的li是塊元素。因此，當您將鼠標移至的任何部分li時，懸停生效。如果你只是想框出現在文本上空盤旋，你可以調整...

添加<span>包裝文字....

<div id="images"> 
    <li> 
     <span>Show</span> 
     <div class="box"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu condimentum odio, non congue quam. Cras feugiat nulla at mattis semper. 
     </div>  
     </li> 
</div> 

然後在span盤旋而不是li本身：

$('li span').hover(function() { 
    $(this).parent().find('.box').delay(100).fadeIn(); 
}, function() { 
    $(this).parent().find('.box').delay(100).fadeOut('fast'); 
}); 

Updated Fiddle here

和你做認識到div標籤包含li是無效的HTML正確嗎？只有ul標籤應該包含li標籤。

Answer 5

使用jQuery：

$(".show").hover(
    function() { 
     $(".box").stop(true, true).fadeIn(500); 
    }, 
    function() { 
     $(".box").stop(true, true).fadeOut(500); 
    } 
); 

Answer 6

沒有錯，jQuery的，但你可以去用CSS :hover和transition更輕。

沒有更多的懸停後顯示效果。

.box { 
 
    color: #FFF; 
 
    width: 0; 
 
    height: 0; 
 
    background: #000; 
 
    position: absolute; 
 
    /* display: none; */ 
 
    margin-top: 50px; 
 
} 
 

 
div:hover .box { 
 
    width: 200px; 
 
    height: 100px; 
 
    transition: all .1s linear .1s; /* property, duration, timing-function, delay */ 
 
}

<div id="images"> 
 
    <li> 
 
     Show 
 
     <div class="box"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
      Fusce eu condimentum odio, non congue quam. 
 
      Cras feugiat nulla at mattis semper. 
 
     </div> 
 
    </li> 
 
</div>