Question

我在Google Chrome中遇到了伪类:hover的问题。

基本上我有一个元素，当它处于：悬停状态时，显示它的兄弟。这很好。

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

当从最小宽度变为较小宽度时，兄弟姐妹的display:none不再发射。

通过查看此示例可能更容易理解。尝试调整视口大小。

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 Canary
FF
IE
Safari浏览器
戏

我可以做些什么来解决这个问题，或者我只需要坚持使用这些接口的javascript。

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

Answer 1

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

我可以通过添加空#target:hover { }

来解决问题

Demo

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

在Chrome中调整窗口大小后，悬停不会触发

1 个答案: