是否可以在a：hover上的同一链接标记内独立更改两种样式？

Question

我有一个锚链接，它有一个图像和两个文本范围，一个标题和一个不同颜色的标语，我希望它们在悬停链接时有不同的变化。

<style>
span.title {color: #666;}
span.tagline {color: #aaa;}
</style>

<a class="button" href="http://www.link.com" target="_blank">
<div style="display:block">
<img src="images/button.png">
<span class="title">TITLE</span><br>
<span class="tagline">tagline</span>
</div>
</a>

我想知道是否可以使用以下内容：

<style>
a.button:hover span.title {color: #000;}
a.button:hover span.tagline {color: #2ae;}
</style>

Answer 1

是的，这是可能的。 Psuedo类:hover不必是选择器中的最后一个元素。

现场演示： http://jsfiddle.net/H35rf/

为了将来参考，在提问之前，您可以更轻松/更快地在jsFiddle中自行尝试。