3

私はこのような選択ボックスを持っています：

<select id="se">
   <option>An option</option>
   <option>Another option</option>
</select>

ユーザーが選択ボックスにマウスを入力したときにテキストを表示し、ユーザーがその領域をマウスで離れた場合は非表示にしたい。このような：

jQuery('#se').mouseover(function(){
   someThing.show();
}).mouseout(function(){
   someThing.hide();
});

最初のステップは正常に機能します。選択ボックスに入ると、テキストが表示されます。選択ボックスをクリックしてオプションを選択すると、オプションの上にマウスを置くと「マウスアウト」イベントがトリガーされますが、オプション要素は選択要素内にあります...理由はわかりませんが、jQuery私は選択ボックスから出ていると思っているようです。

HTMLコードを変更せずに解決策はありますか？

編集：私はmouseenter、mouseover、mouseout、mouseleaveを試しました...

4

5 に答える 5

3

変数を使用するisFocus

JavaScript / Jquery：

var isFocus = false;
jQuery('#se').mouseover(function(){
   someThing.show();
}).mouseout(function(){
    if(!isFocus)
    {
       someThing.hide();
    }
}).focus(function(){
    isFocus = true;
}).blur(function(){
    someThing.hide();
    isFocus = false;
});
于 2012-08-17T12:34:01.017 に答える
0

これを試して：

var $someThing = $('#something')
var stop;

jQuery('#se').hover(function(){
    $someThing.stop().fadeIn();
    clearTimeout(stop)
}, function(){
     stop = setTimeout(function(){
          $someThing.stop().fadeOut();
     }, 2000)
});

フィドル

于 2012-08-17T12:45:41.567 に答える
0

クリックすると、mouseout イベントと mouseover のバインドが解除され、mouseout イベントがバインドされます。

于 2012-08-17T13:17:42.290 に答える
0

純粋なJSソリューションが必要な場合、マウスオーバーイベントをオプションで発生させ続ける最も簡単な方法は、<div>アレンが提案したようにそれをラップすることです。

私は単に.wrap() methodあなたのすべてのを簡単に処理し、<select>それらの周りに自動的に div を追加します。次に、次のように設定されたライブ マウスオーバー/マウスアウト イベントを取得します。

jsFiddle デモ

$('select').wrap('<div class="seWrapper" />');

$(document).on('mouseover', '.seWrapper', function (e) {
        console.log('mouseIN');
});

$(document).on('mouseout', '.seWrapper', function (e) {
        console.log('mouseOUT');
});​
于 2012-08-17T13:02:35.213 に答える