jQuery:鼠标，鼠标选择

Question

我有一个这样的选择框：

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

当用户在选中框中输入鼠标时，我想显示一个文本，如果用户将该区域与鼠标一起离开，则将其隐藏。如下所示：

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

第一步做得很好。当我输入选择框时，将显示文本。当我现在点击选择框来选择一个选项时，当我的鼠标放在一个选项上时，"mouseout“事件就会被触发--但是选项元素在select元素中.我不知道为什么，但是jQuery似乎认为我超出了选择框。

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

编辑：我试过鼠标，鼠标.

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解决方案，那么真正让mouseover事件在选项上触发的最简单的方法就是像Allen建议的那样用一个<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');
});​