Keep the div: hover over when changing a nested select box

Question

This is a problem only with IE. You can see the problem here (dead link) with IE (wait for the page to load, and hover over the NY Times in the panel at the bottom left, then try selecting a new option). Layout: .toolTip becomes visible when its parent div freezes. Inside .toolTipis a selection box. When the user opens the selection window to make a selection, the parent element is hidden.

Why does IE think that when I hover over the Select box, I'm no longer above the parent div?

Here is some relevant code (for simplification):

#toolBar .toolTip {
    position: absolute;
    display:none;
    background: #fff;
    min-width: 300px;
    }   

#toolBar .socialIcon:hover .toolTip {
    display:block;
    }

and

<div id="toolBar">
<div class="socialIcon">
     <span class="toolTip">
         <h1>NY Times Bestsellers Lists</h1>
           <div id="nyTimesBestsellers">
             <?php include('/ny-times-bestseller-feed.php') ?>
           </div>

       <p>
          <select id="nyTimesChangeCurrentList" name="nyTimesChangeCurrentList"> 
            <option value="hardcover-fiction">Hardcover Fiction</option> 
            <option value="hardcover-nonfiction">Hardcover Nonfiction</option> 
            <option value="hardcover-advice">Hardcover Advice</option> 
          </select>
       </p>
     </span>
</div>
</div>

What i tried

. position display , , p, span, div, .

Answer 1

, <a href="#" class="closeParentBox">close</a> div .toolTip

<!--[if IE]>
<script type="text/javascript">
  jQuery(function($){
    $('.toolTip select').focus(function(){
        $(this).parents('.toolTip').addClass('keepOpen');
    });
    $('.toolTip select').blur(function(){
        $(this).parents('.toolTip').removeClass('keepOpen');
    });

    $("a.closeParentBox").click(function(){
        $(this).parents('.toolTip').fadeOut();
        return false;
    });
  });
</script> 
<![endif]-->

... .

Answer 2

: http://jsfiddle.net/TnzS4/

, SELECT. , , .

(Chrome, FF, Safari, Opera) : SELECT ( OPTION), DIV - , :hover .

, OPTION IE, - , :hover .

: IE, SELECT "" :hover, .

, , , IE. , .

Answer 3

. IE, IE7 IE9 9.0.7930.16406

. - Javascript / CSS !

Answer 4

Sime Vidas JSFiddle, : http://jsfiddle.net/TnzS4/221/

:

$wrap = $('.wrap');
$dropdown = $('.dropdown');

$dropdown.focus(function() {
  $wrap.addClass('hover');
  $dropdown.one('change', function() {
    $wrap.removeClass('hover');
    $dropdown.blur();
  });
});
$dropdown.blur(function() {
  $wrap.removeClass('hover');
});

"hover", "hover", .

.hover CSS : hover.

The focus event only fires once when you click the drop-down menu until it is blurred again. The solution is to blur () the drop-down list after selecting an option that allows you to fix the work several times.

In my specific case, I had to put $ wrap.removeClass ('hover') in setTimeout, as shown below. It depends on your script, so I left it outside of the JSFiddle:

setTimeout(function() {
  $wrap.removeClass('hover');
}, 1000);