HTML/CSS issue with a:hover and spans

Question

Any way I can get this working?

I have a block of code:

<p><a href="http://foo.com"&gt;&lt;span class="title">Title</span><br /><br />
Some text no greater than a couple of lines...</a></p>

My styles are:

p {color:#FFF;}
a {color:#999;}
.title {color:#FFF; font-weight:bold;}
a:hover {color:#FF0;}

My problem is as follows:

I want the title to be white and bold and the body to be gray, but when you hover over any part, I want the title AND text to become yellow. However, in the above scenario, only the text becomes yellow because the span color (white) overrides the a:hover.

If I add:

.title:hover {color:#FF0;}

then the title color only changes if I specifically hover over the title. It also doesn't change the text to yellow, as it is now a span hover...

Any way I can resolve this, even if it requires a little JS?

Thanks!

Answer 1

Have you tried

a:hover .title {color:#FF0;}

Answer 2

Change the last line to:

a:hover, a:hover .title {color:#FF0;}

Answer 3

a:hover {color:#FF0 !important;}

Override the color no matter what other colors might be applied to elements inside it.