Question

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 …

Answer 1

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;
});