带有 a:hover 和 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;}

Answer 2

你试过了吗

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