Search code examples
htmlcsscss-sprites

mouse over css sprite

I have an anchor like this:

<a href="#">
   <i class="ico01"></i>
   <span>Text</span>
</a>

ico01 applies an image with CSS sprite. I would like to change the background color of the anchor content (span + i) on mouse over, however it just applies to the text (span). Is there any trick that I`m missing?

Here`s a JS Fiddle. I need the background not only in the span, but also wrapping the image:

https://jsfiddle.net/0esbmusq/1/

Thanks in advance

Solution

  • Try this:

    a{
   display:block;
}


    .ico01 {
  background: url('https://download.seaicons.com/icons/marcus-roberto/google-play/512/Google-Chrome-icon.png') no-repeat -10px -24px;
  width: 492px;
  height: 488px;
  display:block;
}
a{
  display:block;
}
a:hover {
  background-color:red;
}
    <a href="#">
  <span>Google</span>
  <i class="ico01"></i>
</a>