css - 是否可以在 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

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

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

为了将来参考，在提问之前在jsFiddle中自己尝试一下会更容易/更快。