IE 中的下拉列表干扰了 CSS 悬停样式答案

【问题标题】：Dropdown lists in IE are interfering with CSS hover stylesIE 中的下拉列表干扰了 CSS 悬停样式
【发布时间】：2017-05-26 00:23:01
【问题描述】：

我有一个使用纯 CSS 菜单系统的网页。用户将鼠标移到菜单上时菜单会展开，鼠标离开时菜单会折叠。问题是我在此菜单中有一个 HTML 下拉列表 - 即“选择”元素，在 Internet Explorer 中，将鼠标移到“选择”中的任何项目上都会导致菜单折叠。

我的测试表明，在包括 11 在内的 IE 版本中，将鼠标移到“选择”列表中的“选项”项上会导致“选择”的父元素不再被视为：悬停。

这个 JS fiddle 说明了这个问题：https://jsfiddle.net/q3L2m3ys/

当我在 Opera 27.0 中运行这个小提琴时，当鼠标悬停在它上面时，框会变成绿色，即使在单击“选择”元素并将鼠标移到列表中的某个项目上之后，它也会保持绿色。所以我的 CSS 菜单在 Opera 中应该可以正常工作。

但是在 IE 11 中，一旦您单击并将鼠标移到列表中的“选项”元素上，该框就会再次变为红色。

如何让 IE 中的“选择”元素表现自己并像在 Opera 中一样“通过”:hover 状态到底层元素？注意：我已经尝试过指针事件：无；但它没有用。

  [1]: https://jsfiddle.net/q3L2m3ys/

.TestCss{
    width:300px; height:300px;
    background-color:red;
}

.TestCss:hover {
    background-color:green;
}

<div class="TestCss">
    <select name="MyDropDown">
        <option value="1">Test 1</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>

【问题讨论】：

您是仅限于 CSS 答案还是尝试 JavaScript/jQuery？
我正在使用预构建的解决方案（ACE 响应式管理模板），它们的鼠标悬停菜单是纯 CSS。但是，如果我真的需要，我可以修改它们以使用 jQuery
所以...这是一个非常有趣的问题。我注意到在 Chrome 上，没有下拉动画，但在 IE 11 上有一个……这让我想知道这个简单的动画是否真的停止了放置在父 div 上的悬停事件的传播……我'确定有人可以更好地解释这一点，但如果你不明白，那么你总是可以使用 JavaScript。

标签： html css internet-explorer

【解决方案1】：

这救了我（重置背景，即使它已经在 css 文件中设置）：$('select').css('background-color','red')

【讨论】：