css - :hover and spans 的 HTML/CSS 问题

Question

有什么方法可以让它正常工作吗？

我有一段代码:

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

我的风格是:

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

我的问题如下:

我希望标题为白色且粗体，主体为灰色，但是当您将鼠标悬停在任何部分时，我希望标题和文本变为黄色。但是，在上述情况下，只有文本变为黄色，因为跨度颜色(白色)覆盖了 a:hover。

如果我添加:

.title:hover {color:#FF0;}

只有当我专门将鼠标悬停在标题上时，标题颜色才会改变。它也不会将文本更改为黄色，因为它现在是跨度悬停...

有什么方法可以解决这个问题，即使它需要一点 JS？

谢谢!

Answer 1

将最后一行改为:

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