保持div：更改嵌套选择框时悬停打开 [英] Keep div:hover open when changing nested select box

问题描述

这是一个仅限IE的问题。您可以在此处查看问题（死链接）与IE（等待页面加载，悬停在左下角工具栏中的NY Times图标，然后尝试选择一个新选项）。 布局： .toolTip 在父div被悬停时变为可见。 .toolTip 内是一个选择框。当用户打开选择框进行选择时，父元素被隐藏。

This is an IE-only problem. You can see the problem here(dead link) with IE (wait for the page to load, and hover the NY Times icon in the bottom left toolbar. Then try to select a new option). The Layout: .toolTip becomes visible when it's parent div is hovered over. Inside of .toolTip is a select box. When the user opens the select box to make a selection, the parent element gets hidden.

为什么IE认为当我将鼠标悬停在选择框上时，

Why is IE thinking that when I hover over the Select box, I am not over the parent div anymore?

这里是一些相关的代码（为了清楚起见，下同）：

Here is some relevant code (pared down for clarity):

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

我尝试过的

将选择元素移入和移出其他元素。在此处涉及的选择，选项，p，span，div上更改位置和显示属性。 / p>

Moving the select element in and out of other elements. Changing the position and display properties on the select, option, p, span, div, that are involved here.

推荐答案

通过添加< a href =＃class =closeParentBox关闭 到 .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]-->

不太漂亮...但我想听到更好的答案。

Not pretty ... I'd love to hear better answers, though.

这篇关于保持div：更改嵌套选择框时悬停打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！