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

这是唯一的问题。您可以在这里看到IE的问题（死链接）（等待页面加载，并将“纽约时报”图标悬停在左下角的工具栏上。然后尝试选择一个新选项）布局：

。当其父div悬停在上方时，工具提示将可见。
.toolTip
的内部是一个选择框。当用户打开选择框进行选择时，父元素将隐藏

为什么IE认为当我在选择框上悬停时，我不再在父div上了

以下是一些相关代码（为了清晰起见，请删减）：

及


纽约时报畅销书排行榜

精装小说
精装非小说类
精装书建议


我尝试过的

将“选择”图元移入和移出其他图元。更改此处涉及的select、option、p、span、div上的
位置
和
显示
属性。

在演示中，您有一个包含SELECT元素的灰色框。无论何时将框悬停，它都会变为红色

现在，现代浏览器（Chrome、FF、Safari、Opera）都是这样的：如果打开SELECT元素并将鼠标悬停在其项目（OPTION元素）上，DIV框将保持红色背景-这意味着
：hover
状态仍处于活动状态

但是，如果将鼠标悬停在IE中的选项元素上，该框将变为灰色-这意味着
：hover
状态未处于活动状态

结论：在IE中，将鼠标悬停在选定元素的下拉列表上将“杀死”所有
：悬停
处于活动状态的状态

现在，我不知道这是否是一个错误，但你必须找到一个解决这个IE特定问题的方法。不幸的是，我不知道解决方法。
通过在
.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]-->



不漂亮。。。不过，我希望听到更好的答案。
我可以证实。
IE bug，从IE7到IE9 9.0.7930.16406

我也有类似的问题。解决这个问题的唯一方法是使用Javascript添加/删除类或动态更改css属性
 我已经更新了Sime Vidas的JSFIDLE，包括我的解决方案：

简而言之：

$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类模仿了：hover伪类的CSS

单击下拉菜单时，“聚焦”事件仅触发一次，直到再次模糊为止。解决方案是在选择一个选项后模糊下拉列表，使修复程序可以多次运行

在我的特殊情况下，我必须将$wrap.removeClass（'hover'）放在setTimeout内，如下所示。这取决于您的场景，因此我将其从JSFIDLE中删除：

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

工具提示不应使用跨度元素。DIV元素是正确的选择。@Šime左下角，白色的“工具栏”中有6个图标，它在右边。你必须等待页面加载。另外，facebook图标在IE（IE9测试版）中不起作用。
$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');
});

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