CODEWITHSUNDEEP
cssinternet-explorerhover
cdonner
cdonner

Reputation: 37658

:hover pseudo state not triggering in IE

I have this markup

<button class="toggle" aria-label="Toggle">
   <div class="globe-img"></div>
</button>

and this SASS:

.globe-img {
   background-image: url('../images/globe.png');
   height: 50px;
   width: 50px;
   &:hover {
     background-image: url('../images/globe-hv.png');
   }
 }

It works in all the latest browsers but IE. The hover pseudo state does not trigger in IE. I have found a number of questions on Stackoverflow about this, but they are all older and have not provided a solution (yet), so I figured it might be worth asking again.

Note that both states have a background image defined. I have added z-index and tried an IMG tag instead of the DIV. I tried display:block and added background colors. I appreciate any new pointers. If nothing else, I will just use Javascript to add a regular CSS class upon hover.

Upvotes: 0

Views: 36

Answers (1)

Bryce Howitson
Bryce Howitson

Reputation: 7690

I could be wrong since I don't have IE to test...

I'm guessing the button as a wrapper is the issue. I assume the button's hover state clobbers the div's hover state. Does it work if you remove the <button>?

Alternately does it work if you move the hover to the button?

 .globe-img {
   background-image: url('../images/globe.png');
   height: 50px;
   width: 50px;
 }
 button:hover .globe-img {
   background-image: url('../images/globe-hv.png');
 }

Upvotes: 1

Related Questions