I have a sprite that I utilize for displaying various images. Currently, my aim is to change the sprite image upon hovering using solely CSS.
.sprE {
background-color: transparent;
background-image: url(/i/fW.png);
background-repeat: no-repeat;
height: 30px;
width: 30px
}
.sprE:hover {
background-image: url(/i/fC.png);
cursor: pointer
}
.comply {
background-position: 0 0
}
<span class="sprE comply"></span>
The code works perfectly fine on FireFox but unfortunately, it doesn't function properly on Internet Explorer. While I know I could potentially resolve this issue by utilizing jQuery, I would like to explore all the possible CSS solutions first.