Button:hover Not Working In Ie 11 Compatibility Mode

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

Solution 1:

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;
}


<aclass="foo"href="https://stackoverflow.com/">Stackoverflow</a> 
will change color on hover, but
<buttonclass="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:

<aclass="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. ;)