IE11：悬停在选择上时悬停效果停止工作答案

【问题标题】：IE11 :hover effect stops working when hovering over selectsIE11：悬停在选择上时悬停效果停止工作
【发布时间】：2018-03-22 15:55:42
【问题描述】：

我在 IE 上的 CSS 悬停有问题。

为了简化；我基本上有一个容器 div，当它悬停时会在里面显示一个小 div，里面有一些 <select> 标签（见下面的代码）。此设置在所有主要浏览器上都可以正常工作，除了（谁猜到了）在 Internet Explorer（11 和可能更低的版本）上。

悬停可以正常工作，但是一旦您尝试从两个<select> 标签中选择<option>，由于某种原因，:hover 将不再起作用并且 div 消失。

在 chrome / firefox 等中尝试此示例以查看所需的结果，然后在 IE11 中重试以查看问题。

.containerDiv {
  position: fixed;
  width: 500px;
  height: 500px;
  background: red;
  top: 0;
  left: 0;
}

.containerDiv:hover .someDiv {
  left:0;
}

.someDiv {
  position:absolute;
  top:0;
  left:-300px;
  width: 300px;
  background: blue;
  transition: all ease .5s;
}

<div class="containerDiv">
  <div class="hoverMe">
    Hover Me
    <div class="someDiv">
      <h3>
        Hi, I'm SomeDiv
      </h3>
      <select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
      <br><br>
      <select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
    </div>
  </div>
</div>

【问题讨论】：

查看此解决方法：stackoverflow.com/questions/22530270/…

标签： html css

【解决方案1】：

正如我在评论中所说，您可以使用类似的方法作为解决此问题的方法：

$("select").on("focus", function() {
    $(this).parent().addClass("hovered");
}).on("blur", function() {
    $(this).parent().removeClass("hovered");
});

然后将.yourParentElement.hovered应用于与.yourParentElement:hover相同的规则：

.yourParentElement:hover, .yourParentElement.hovered { /* some css rules */}

【讨论】：