按钮:悬停在IE 11兼容模式下不起作用 [英] button:hover not working in IE 11 compatibility mode

问题描述

我正在尝试将 hover 效果添加到 button 标签.但是它在IE 11(兼容模式)下不起作用.我找不到任何关于为什么它不起作用的参考.解决办法是什么?

  .genericBtn {背景颜色:#FFFFFF;颜色:#000000;}.genericBtn:hover {背景颜色:灰色；颜色:#FFFFFF；}  

 < button class ="genericBtn">< span>悬停更改</span></button>< br>< h3>此悬停效果在IE 11(兼容模式)中不起作用</h3>  

解决方案

Microsoft在IE8中引入了兼容模式，以模拟旧版IE遗留应用程序的怪癖和错误.

这些怪癖之一是/是否:hover 伪类仅在链接(< a href =…> 标记)上起作用:

  .foo {颜色:粉红色；}.foo:hover {颜色:粉红色；}< a class ="foo" href ="https://stackoverflow.com/"> Stackoverflow</a>会在悬停时改变颜色，但是< button class ="foo"> Stackoverflow</button>将保持不变 

对

一种可能的解决方案是将< a> 与 onClick 一起使用来模拟按钮行为:

 < a class ="foo" href =#" onclick ="doSomething();返回false;">做某事</a> 

或者...只是不用担心，我认为没人希望在2018年需要IE7渲染的应用程序中使用精美的按钮.;)

I'm trying to add hover effect to button tag. But it doesn't work in IE 11 (compatibility mode). I'm unable to find any reference of why it doesn't work. What can be the workaround for this?

.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>

解决方案

Microsoft introduced compatibility mode in IE8 to emulate quirks and errors of old IEs for legacy apps.

One of these quirks is/was that :hover pseudoclass works only on links (<a href=…> tags):

.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

Browser support for :hover on MDN:

One possible solution would be to use <a> with onClick to emulate the button behavior:

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

Or… just don't worry about it, i think that nobody expects fancy buttons in an app that needs IE7 rendering in 2018. ;)

这篇关于按钮:悬停在IE 11兼容模式下不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！