jQuery: mouseenter, mouseover, mouseleave, mouseout on select

3
votes

I have a select box like this:

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

I want to display a text when the user enter the mouse on the select box and hide if the user leave the area with the mouse. Like this:

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

The first step works fine. When I enter the selectbox the text will be displayed. When I now click on the select box to select an option the "mouseout" event will be trigger when I have my mouse over a option - but the option element is IN the select element ... I don't know why, but jQuery seems to think that I am out of the select box.

Is there any solution, without to change the HTML code ?

edit: I tried mouseenter, mouseover, mouseout, mouseleave ...

5
jquerymouseeventmouseovermouseentermouseleave
That is the correct behavior. When you click on an element and the list disappears you're no longer over the list. - insertusernamehere
As @insertusernamehere mentions, that is the correct behavior. jsfiddle.net/Pnm7J - undefined
What exactly should happen? Should "omething" stay for a little longer and than hide after the selection is made? - insertusernamehere
I believe the issue is that moving the cursor from the select box to the option list causes the red element to be hidden. - pimvdb

5 Answers

3
votes

Use a variable 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;
});
0
votes

Try this:

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

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

Fiddle

0
votes

If you want a pure JS solution, the easiest way to truly keep the mouseover event fired over options is to wrap it with a <div> as Allen suggested.

I would simply do a quick .wrap() method around all your <select>'s, and add a div automatically around them. Then get a live mouseover/mouseout event set up like so:

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
votes

On click, unbind the mouseout event and mouseover, bind mouseout event.

0
votes

I used a timer to prevent the mouseleave event is triggered. It worked very well.

var timeoutOver;

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

    clearInterval(timeoutOver);
    //over event

}).mouseleave(function () {

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

});