首页 文章

jQuery：mouseenter，mouseover，mouseleave，mouseout on select

提问于
浏览 次
3

我有一个这样的选择框：

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

我想在用户在选择框中输入鼠标时显示文本，并隐藏用户是否使用鼠标离开该区域 . 像这样：

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

第一步工作正常 . 当我进入选择框时，将显示文本 . 当我现在单击选择框以选择一个选项时，当我将鼠标放在选项上时会触发“mouseout”事件 - 但是选项元素是在选择元素中...我不知道为什么，但是jQuery似乎认为我不在选择框中 .

是否有任何解决方案，而无需更改HTML代码？

edit: 我尝试过mouseenter，mouseover，mouseout，mouseleave ......

jquery mouseevent mouseover mouseenter mouseleave

5 回答

  • 0

    试试这个：

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

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

    Fiddle

    回复于
  • 0

    使用变量 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;
});
    回复于
  • 3

    如果你想要一个纯粹的JS解决方案，真正保持mouseover事件触发选项的最简单方法是用Allen建议的 <div> 包装它 .

    我只是快速.wrap() method围绕你所有的 <select> ，并在它们周围自动添加一个div . 然后像这样设置一个实时鼠标悬停/ mouseout事件：

    jsFiddle DEMO

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

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

$(document).on('mouseout', '.seWrapper', function (e) {
        console.log('mouseOUT');
});​
    回复于
  • 0

    单击，取消绑定mouseout事件并鼠标悬停，绑定mouseout事件 .

    回复于
  • 0

    我用了一个计时器来防止mouseleave事件被触发 . 它工作得很好 .

    var timeoutOver;

$("#btn").mouseenter(function () {

    clearInterval(timeoutOver);
    //over event

}).mouseleave(function () {

    timeoutOverPeriod = setTimeout(function() {
            //out event
            $("my-select").blur();
    }, 500);

});
    回复于

相关问题