jquery - jQuery: mouseenter, mouseover, mouseleave, mouseout on select

Question

我有一个这样的选择框：

<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 代码？

编辑：我试过 mouseenter、mouseover、mouseout、mouseleave ...

Answer 1

使用变量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;
});

Answer 2

试试这个：

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

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

小提琴

Answer 3

如果您想要一个纯 JS 解决方案，真正保持鼠标悬停事件触发选项的最简单方法是<div>按照艾伦的建议将其包装为 a 。

我会简单地快速浏览.wrap() method一下您的所有<select>'，然后在它们周围自动添加一个 div。然后像这样设置一个实时 mouseover/mouseout 事件：

jsFiddle 演示

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

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

$(document).on('mouseout', '.seWrapper', function (e) {
        console.log('mouseOUT');
});​

Answer 4

单击时，取消绑定 mouseout 事件和 mouseover，绑定 mouseout 事件。

Answer 5

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

var timeoutOver;

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

    clearInterval(timeoutOver);
    //over event

}).mouseleave(function () {

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

});