1

リスト要素に単純なホバー効果を作成しようとしています。ただし、マウスがリスト項目の上にあるときに表示される要素の間には小さなギャップがあります。これにより、イベントが強制的mouseleaveにトリガーされますが、これは望ましくありません。

これがフィドルのデモです。リスト項目にカーソルを合わせた後、小さなボックスに移動してみてください。

HTML:

<ul>
    <li>test <div class="block">Block</div></li>
    <li>test2 <div class="block">Block descriptions</div></li>
</ul>​

CSS:

ul { width: 50px; }
ul li { width: 50px; height: 50px; background: #c00; margin: 0 0 10px 0; }
li .block { 
    position: absolute; 
    margin: 0 0 0 70px;
    background: #ddd;
    display: none;
}

JavaScript:

$("ul li").hover(function() {
    $(this).children(".block").stop().fadeIn();
}, function() {
    $(this).children(".block").stop().fadeOut();
});​

そのような影響を防ぐ方法は？

4

4 に答える 4

1

このデモをお試しください：

$('ul li').on("mouseenter mouseleave",function( e ){
   var $this = $(this);
   if (e.type == 'mouseenter') {
       clearTimeout( $this.data('timeout') );
       $this.find('.block').stop().fadeTo(400,1);
   }else{
       $this.data( 'timeout', setTimeout(function(){
           $this.find('.block').stop().fadeTo(200,0, function(){
             $(this).hide(); 
           });
       },200) );
   }
});

機能は次のとおりです。タイムアウト値をdata現在ホバーされている要素の属性に設定します。これは、要素が表示されたまま要素にマウスが入るのを200ミリ秒待つホバーインテントliのように機能します。マウスがブロック要素に到達すると、タイムアウトがリセットされます。 .block

于 2012-08-20T09:38:17.387 に答える
0

mouseleaveマウスを子の上に移動しようとすると、文字通り要素を離れるため、イベントがトリガーされます。li唯一の解決策は、要素の幅を拡張することです。

同じ外観を維持するには、赤いボックスを独自の要素に移動することをお勧めします。次に例を示します。

<ul>
    <li>
        <span class="icon">test</span> 
        <span class="block">Block</span>
    </li>
    <li>
        <span class="icon">test2</span> 
        <span class="block">Block descriptions</span>
    </li>
</ul>​

CSS を次のように変更します。

li span {
    display: inline-block;
    vertical-align: middle;
}

li .icon {
    width: 50px; 
    height: 50px; 
    background: #c00;
}

li .block { 
    margin: 0 0 0 70px;
    background: #ddd;
    display: none;
}

li要素は両方の子に拡張されます: DEMO。ただしdisplay: inline-block、古い IE バージョンでは機能しない可能性があることに注意してください。（ http://caniuse.com/inline-blockによると問題ないはずです）。

于 2012-08-20T10:18:19.333 に答える