Question

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

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

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

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

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

如何在IE中获取“select”元素以表现自己并将“悬停状态”“传递”到底层元素，就像在Opera中一样？注意：我已经尝试过指针事件：无;它不起作用。

  [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文件中设置了重置背景）：$（＆＃39; select＆＃39;）。css（＆＃39; background-color＆＃39;，＆＃39; red＆＃ 39）

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

1 个答案: