保持div:更改嵌套选择框时悬停打开

Question

这是一个仅限IE的问题.你可以在这里看到问题(死链接)与IE(等待页面加载,并将NY Times图标悬停在左下角的工具栏中.然后尝试选择一个新选项).布局: .toolTip当它的父div悬停在它上面时变得可见.里面.toolTip是一个选择框.当用户打开选择框进行选择时,父元素将被隐藏.

为什么IE认为当我将鼠标悬停在选择框上时,我不再在父div上了？

以下是一些相关代码(为清晰起见,已减少):

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

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

和

<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>

我试过的

将select元素移入和移出其他元素.更改此处涉及的select,option,p,span,div 的position和display属性.

Answer 1

通过添加<a href="#" class="closeParentBox">close</a>到.toolTipdiv和使用来解决这个问题

<!--[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]-->

不漂亮......但是我很想听到更好的答案.