Question

这是一个仅限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> 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州仍然有效。

但是，如果将鼠标悬停在IE中的OPTION元素上，则该框变为灰色 - 这表示:hover状态未激活。

结论：在IE中，将鼠标悬停在SELECT元素的下拉列表中将“杀死”所有处于活动状态的:hover个状态。

现在，我不知道这是否是一个错误，但你必须找到这个IE特定问题的解决方案。不幸的是，我不知道解决方案。

Answer 3

我可以确认一下。 IE bug，从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伪类的CSS。

“焦点”事件仅在您点击下拉列表时触发一次，直到它再次模糊。解决方案是在选择选项后模糊（）下拉列表，允许修复程序多次工作。

在我的特定情况下，我必须将$ wrap.removeClass（'hover'）放在setTimeout中，如下所示。这取决于你的场景，所以我把它从JSFiddle中删除了：

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

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

4 个答案: