リンク文字のホバーエフェクトでつまずいたときのメモ。
<HTML>
<a href=“#" class="demo1"> リンクテキストのマウスオーバー リンクテキストとマウスーバーの色を変更したいとき、 CSSで設定する方法は、よく使います。 </a>
<CSS>
.demo1 a {color: #342d29; text-decoration: none}
.demo1 a:hover {color: #e00376}
このリンク文字の中の一部だけの色を変化させたいとき。
<span></span>で囲った部分に文字色を指定してやるだけだと、マウスオーバーで<span>で囲った部分のホバーが効かなくなった。
！！！！！
なんで〜（汗）！
CSSをいろいろ書き換えてみたけど、思うようにCSSが効かない。。。
そこでいつものグーグル先生の登場。
いろいろ調べてみたらこんな説明が！
.demo3 li:hoverで大丈夫じゃないの？と思いますが、それだと、リンクテキストに変更が適用されません。
実際は.demo3 li a:hoverというような指定します。
「リストアイテム(<li>)の中のリンク(<a>)をマウスオーバー(:hover)したときだよ」っという感じで指定します。li:hoverで指定してしまうと、<li>内の普通のテキストだけ変わったりして、その中にあるリンクテキストの装飾は変わりません。
融通の利かないところですね～。
慣れないうちは、「なんで、ここにCSSが効かないんだぁ～」っとイライラしてしまうことがあります。<a>と、他のタグとのコンビネーションの時は、<a>部分に、しっかりとCSSを指定しないと効かないことがあることを覚えておきましょう。
参照：http://webfeelfree.com/mouseover-css-hover/
これを参考に書き換えてみたら、バッチリ！！
テキストカラー自体をあれこれいじるのではなく、「demo1」の「span」のホバー効果を指定してやるんですね！
<HTML>
<a href=“#" class="demo1"> <span class=“demo2”>リンクテキストのマウスオーバー</span> リンクテキストとマウスーバーの色を変更したいとき、 CSSで設定する方法は、よく使います。 </a>
<CSS>
.demo1 a {color: #342d29; text-decoration: none}
.demo1 a:hover {color: #e00376}
.demo1 a:hover span {color: #5cc8d7}