Same hover effect for all link children in CSS

Question

Hi,

I have the following HTML:

<a href="">Bioshock 2<span> - Xbox 360 review</span></a>

I'd like to style the first part of the link in one way and the span in another, like this:

I've managed to do this, using the following CSS:

a {
    text-decoration: none;
}

a span {
    color: #c8c8c8;
}

a:link, 
a:visited {
    color: #787878;
}

a:hover,
a:active {
    color: #fff;
    background-color: #a10000;
}

However, it doesn't work as expected when I hover over it:

I'd like the entire link to have the same hover effect and not have the span keep its colour. I'd also like this to happen whether you're hovering over the span or the rest of the link. The desired effect would look like this:

Any ideas how I could do this?

Answer 1

Add this css code to it:

a span:hover {
      color: #fff;
      background-color: #a10000;
}

And here is the demonstration. :)

Answer 2

Try:

a:hover, a:active, a:hover span {
  // ...
}

instead of:

a:hover, a:active {
  // ...
}