button:hover 在 IE 11 兼容模式下不起作用答案

【问题标题】：button:hover not working in IE 11 compatibility modebutton:hover 在 IE 11 兼容模式下不起作用
【发布时间】：2018-03-20 07:53:35
【问题描述】：

我正在尝试将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>

【问题讨论】：

发现一个错字：您的意思是使用#000000（零），而不是#OOOOOO（字母“O”）？
@Terry，谢谢，纠正了错字。
那个错字修复了 ie11 吗？
你的<head>中有<meta http-equiv="X-UA-Compatible" content="IE=Edge" >吗？
当我在 IE 11 中运行这段代码 sn-p 时，它工作正常。也许您的实际代码与此 sn-p 不同？您是否尝试过使用十六进制代码而不是颜色名称？喜欢backgorund-color: #808080;

标签： javascript html css

【解决方案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 渲染的应用程序中有花哨的按钮。;)

【讨论】：

不会是onmouseover/onmouseout吗？
@Quentin，感谢您的建议，我想我需要依赖这些事件。
兼容模式的重点是让 IE 与为 IE 4 开发的代码一起工作。您不需要开发与它一起工作的新代码。