HTML/CSS issue with a:hover and spans
- by Tribalcomm
Any way I can get this working?
I have a block of code:
<p><a href="http://foo.com"><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!
