javascript - 按钮 :hover not working in IE 11 compatibility mode

Question

我正在尝试为 button 标签添加 hover 效果。但它不适用于 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 渲染的应用程序中有花哨的按钮。;)