是否可以在: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中自己尝试一下会更容易/更快。