2

stackoverflowアーカイブを調べましたが、解決策が見つかりませんでした。

問題は、マウスがその上にあるときにボタンがあり、その下にボックスが表示されることです。これで、マウスがボタンの外に移動すると、ボックスが非表示になりますが、注意が必要な部分がここにあります。マウスがボタンを離れてもボックスに残っている場合、ボックスは非表示になりません。

マウスオーバー機能とマウスアウト機能を使用していますが、マウスをボタンの外に移動するとすぐに、ボックスの上にマウスを置いてもボックスが非表示になります。

(function($) { 
      $(function() {
            var dropDown = $('.box'),
            timer,
            cartButton = $('.button');

            cartButton.hover(function(){
                 dropDown.slideToggle();
            });

       });
     })(jQuery);
4

1 に答える 1

1

これを行う最良の方法は、ボックスとボタンの両方を包含要素でラップし、代わりにホバーイベントをそれにバインドすることです。これが簡単なデモンストレーションです。コードはここにあります：

HTML：

<div class="container">
    <input type="button" value="Hover here">

    <div class="box">
        Box content
    </div>
</div>​

jQuery：

$(document).ready(function() {
    $('.container').hover(function() {
        $(this).children('.box').show();        
    }, function() {
        $(this).children('.box').hide();
    });        
});​

イベントは包含要素にバインドされているため、ボタンからボックスに移動するときにマウスが要素を離れることはありません。

display: inlineコンテナはブロック要素であるため、幅の100％を占めるため、またはで固定する必要があることに注意してくださいdisplay: inline-block。

于 2012-06-08T20:44:59.407 に答える