css - a:hover の同じリンク タグ内で 2 つのスタイルを個別に変更することはできますか?

Question

画像とテキストの 2 つのスパン、異なる色のタイトルとキャッチフレーズを持つアンカー リンクがあり、リンクをホバリングしたときにそれらを異なる方法で変更したいと考えています。

<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で自分でこれを試す方が簡単/迅速です。