html - 保留 div :hover open when changing nested select box

Question

这是 IE 独有的问题。您可以使用 IE 在此处查看问题(死链接)(等待页面加载，并将鼠标悬停在左下方工具栏中的纽约时报图标。然后尝试选择一个新选项)。 布局: .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、option、p、span、div的position和display属性。

Answer 1

通过添加 <a href="#" class="closeParentBox">close</a> 解决了这个问题到 .toolTip div 和

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

不太好……不过，我希望听到更好的答案。