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

编辑：我试过 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

如果您想要一个纯 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');
});​
于 2012-08-17T13:02:35.213 回答
0

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

于 2012-08-17T13:17:42.290 回答
0

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

var timeoutOver;

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

    clearInterval(timeoutOver);
    //over event

}).mouseleave(function () {

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

});
于 2014-02-28T20:32:35.480 回答