2011.08.04
css

a:hoverが反映されない

リンク部分にマウスを乗せたときにテキストの色などを変えるというのはCSSの基本かと思います。

数え切れないくらい使っているセレクタなのに、先日発見したことがあります。

CSSでは後から記述されたものが優先される、というのはもちろん知っていたのですが・・・。

リンクのマウスオーバー時のテキストの色を変えるときは、a:hoverを使います。
私は個人的に、a:hoverしか指定しないことが多いのです。

実際にはa:hoverのほかにも、

a:link まだクリックしていないリンクのテキストの色などを指定
a:visited 既に訪れたリンクのテキストの色などを指定
a:active クリックしてからクリックし終わるまでのテキストの色などを指定

というセレクタがあります。

これらの使い方の説明はここでは省きますが・・・。

なんと、これらのセレクタも使う順序が決まっているんですね!!
知らなかった・・・。

あれーホバーがうまくいかない??
なんで?なんで?

となってた私です。
これって割と当然のことなのでしょうか。恥ずかしいボンミスでした。

ちなみに順序は

a:link 
a:visited 
a:hover
a:active 

の順でないとa:hoverがきちんと動かないので注意しなくてはいけませんねー。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP