IE11中:hover效果在悬停<select>元素时失效问题求助

如果项目允许的话，把原生<select>换成完全用HTML/CSS/JS实现的自定义下拉组件（比如用<div>模拟选项列表）。这样整个下拉区域都属于父容器的DOM范围，IE的:hover就不会误判鼠标离开。不过这个方案需要额外开发或引入组件库，适合对UI一致性要求高的场景。

方案3：CSS小技巧（局限性较大） #

尝试给父容器添加一个全屏的透明伪元素，试图覆盖select下拉的范围：

.your-container-class::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  pointer-events: none; /* 不影响其他元素点击 */
}

但注意：IE的原生select下拉是系统层级的窗口，伪元素根本盖不住，所以这个方法大概率无效，只作为备选思路。

总结 #

优先推荐方案1，用JS精准控制事件逻辑，既能解决IE的兼容性问题，又不会改动太多现有代码。

内容的提问来源于stack exchange，提问作者Tim Gerhard