在 Chrome 中调整窗口大小后悬停未触发

Question

我在使用 Google Chrome 中的伪类 :hover 时遇到问题。

基本上我有一个元素，当它处于 :hover 状态时，它的兄弟会被显示。这很好用。

然后我添加一个媒体查询，以便当视口具有特定的min-width 时，不再显示该元素，但兄弟元素是。

当从最小宽度变为更小的宽度时，兄弟节点上的display:none 不再触发。

看一下这个例子可能会更容易理解。尝试调整视口的大小。

http://jsfiddle.net/5gPGR/1/

HTML

<div id="container">
  <div id="trigger">
  </div>
  <div id="target">
  </div>
</div>

CSS

#container {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 24px;
  line-height: 80px;
  background: #777;
  box-sizing: border-box;
}
#trigger {
  position: absolute;
  display: block;
  width: 50%;
  height: 80px;
  top: 0;
  right: 0;
  background: #275;
}
#target {
  position: absolute;
  display: none;
  width: 50%;
  height: 80px;
  top: 0;
  left: 0;
  background: #f57;
}
#trigger:hover ~ #target {
  display: block;
}
@media screen and (min-width: 400px) {
  #trigger {
    display: none;
  }
  #target {
    display: block;
  }
}

这只是 Chrome/Chrome Canary 中的一个问题。我已经在以下最新版本中进行了测试：

• 铬
• Chrome 金丝雀
• FF
• IE
• 野生动物园
• 歌剧

我可以做些什么来解决这个问题，还是我只需要坚持使用 javascript 来处理这些类型的接口。

编辑： 我忘了提到，如果我使用 chrome 开发工具将元素状态强制为 :hover，它会再次开始工作，直到下一次调整大小。

Answer 1

有趣的错误，我不知道为什么会发生这种情况

我可以通过添加一个空的 #target:hover { } 来解决这个问题

Demo

如果您使用的预处理器会删除此行，则可以添加一个已有的属性，例如 #target:hover { display:block; }