javascript - IE上结合的Active状态伪类和相邻元素选择器

Question

我目前在 IE 上遇到此问题 - http://jsbin.com/riyaxewo/4

HTML

<div class="a">
  1
</div>
<div class="b">
  2
</div>

CSS

.a, .b {
  height: 50px;
  width: 50px;
  padding: 10px 10px;
  border: 1px solid;
  text-align: center;
}
.a:active, .b:active {
  background-color: red;
}
.a:hover + .b {
  background-color: transparent;
}
.a:active + .b {
  background-color: yellow;
}

预期的结果是，只要按下框 #1，框 #2 就会变成黄色，但是，在 IE 上这个效果只会出现一次，然后就不会再出现。

我在 CSS 中而不是以编程方式执行此操作的原因是因为我希望只要在元素上按下鼠标按钮就会发生效果，即使鼠标按钮在其他地方被释放(这意味着我不能依赖于 mouseup，而 mouseleave/mouseout 不会让我得到想要的结果)

Answer 1

希望这会有所帮助:https://stackoverflow.com/a/17211251/3884420

显然它是 IE 中的一个错误，对于事件元素的子元素和类似的东西也是如此。您可以尝试在 mousedown 和 mouseup 触发器上使用的 js 脚本。我知道你说过你不能。

在测试您的问题时还发生了更有趣的事情。如果您尝试在事件时离开鼠标，它每次都会起作用。我删除了您添加的悬停属性，甚至这也停止了工作。我猜每次您的鼠标离开并且悬停效果停止时，事件效果都会再次触发。