ポインタ移動後のホバー効果の防止

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 jQueryを使って間違っている（[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

あなただけliがブロック要素である

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

 
li:hover .box{ 
 
    display: block; 
 
}

Answer 4

ことを行うには、CSSを使用したことがあります。だから、マウスをの上に移動させると、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

そしてあなたを行うliを含むdivタグが無効であることを認識していますか？ ulタグにはliタグが含まれている必要があります。 jQueryを使って

Answer 5

：

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

Answer 6

何もしていますが、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>