html - IE 中的下拉列表会干扰 CSS 悬停样式

Question

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

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

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

当我在 Opera 27.0 中运行此 fiddle 时，当鼠标悬停在该框上时该框变为绿色，即使在单击“选择”元素并将鼠标移到列表中的元素上时它仍保持绿色。所以我的 CSS 菜单在 Opera 中应该可以正常工作。

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

我怎样才能让 IE 中的“选择”元素自行运行并像在 Opera 中那样“传递”:hover 状态到底层元素？注意:我已经尝试过 pointer-events:none;但它没有用。

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

Answer 1

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