按钮：悬停不在IE 11兼容模式下工作

Question

我正在尝试将hover效果添加到button标记。但它在IE 11（兼容模式）中不起作用。我找不到任何关于它为什么不起作用的参考。 可以解决这个问题的方法是什么？

.genericBtn {
  background-color: #FFFFFF;
  color: #000000;
}


.genericBtn:hover {
  background-color: grey;
  color: #FFFFFF;
}

<button class="genericBtn">
  <span>Hover to change</span>
</button>

<br>

<h3>This hover effect doesn't work in IE 11(compatibility mode)</h3>

Answer 1

Microsoft在IE8中引入了兼容模式来模拟旧版IE的怪癖和错误。

其中一个怪癖是:hover伪类仅适用于链接（<a href=…>标签）：

.foo {
  color: pink;
}

.foo:hover {
  color: hotpink;
}


<a class="foo" href="https://stackoverflow.com/">Stackoverflow</a> 
will change color on hover, but
<button class="foo">Stackoverflow</button>
will stay the same

:hover on MDN的浏览器支持：

一种可能的解决方案是使用<a>和onClick模拟按钮行为：

<a class="foo" href="#" onclick="doSomething(); return false;">Do something</a>

或者......只是不要担心，我认为没有人会期望2018年需要IE7渲染的应用程序中的花哨按钮。;）