Jquery hover function misfires when hover on the select box

Question

My requirement is, when i hover over the popup and select something on form, popup should keep visible.

If the popup lose the move hover, it should be hidden

Everything working well with the below code. But when i try to select the option in the select box (options dropping down out of popup), popup gets hidden.

Here is the JSFIDDLE link http://jsfiddle.net/LNGz6/5/ and this problem occurs only in Internet Explorer

Here is the code

<div id="popup">
 <div class="label"> Search </div>
  <div class="control"> 
      <select name="searchval">
         <option value="entries">Entries</option> 
         <option value="bookings1">bookings1</option>
         <option value="bookings2">bookings2</option>
         <option value="bookings3">bookings3</option>
         <option value="bookings4">bookings4</option>
         <option value="bookings5">bookings5</option>
         <option value="bookings6">bookings6</option>
      </select>
   </div>
</div>

Jquery Function

$("#popup").hover(function(){
   //do none
},function(){
   $(this).hide();
});

maybe this question will help: http://stackoverflow.com/questions/149573/check-if-option-is-selected-with-jquery-if-not-select-a-default — Barlas Apaydin, Aug 10 '12 at 11:24

score 1 · Answer 1 · answered Aug 10 '12 at 12:08

You experience this behaviour, because events bubbles up the DOM-Tree and trigger potential parent event handlers. You have two options to solve this:

1) add an Eventhandler on the select Element and stop the Event-Bubbling:

$("select[name=searchval]").hover(function(e){
    e.stopPropagation();
});

2) check the event target and prevent hiding accordingly:

$("#popup").hover(function(){
   //do none
},function(e){
   if (e.target == this){
      $(this).hide();
   }
});

Example for the latter - the hide triggers only on the red part - where the div is not overlapped by a child-element.

score 0 · Answer 2 · answered Aug 10 '12 at 11:52

What I would do, is to check wether the focus is in the input element or not:

$("#popup").hover(function() {
    //do none
}, function() {
    var $sel = $('select');
    if ($sel.is(":focus")) {
        console.log('do not hide');
        $sel.blur();
    } else {
        $(this).hide();
    }
});

Example here.

The popup won't get hidden after selecting any option. The blur method on the select element is necessary, as the focus will remain on it after selecting the option, and the popup wouldn't get hidden if you hover and go out of the box again, in case you hadn't clicked/focused any other element before. The problem comes when what you select is an option that is inside the popup. The focus will remain on the select and you'll have to click somewhere else, this is what I have for now :\

Finally, the way of selecting the selection element is not optimal. In this case it would work, but if you have any other select element in your html, there will be conflicts. So add an id or class to the tag, and modify the selector to be sure that it will affect only to that element.

Jquery hover function misfires when hover on the select box

2 Answers2