CSS :hoverセレクター
CSSセレクター完全リファレンス定義と使い方
:hoverは、マウスがリンクの上に移動したときに追加される特別なスタイルです。
ヒント::hover セレクターは、リンクだけでなくすべての要素に使用できます。
ヒント: :link:link セレクターは未訪問のページリンクのスタイルを設定し、:visited:visited セレクターは訪問済みのページリンクのスタイルを設定し、:active:active セレクターはリンクをクリックしたときのスタイルを設定します。
注意:期待どおりの効果を得るには、CSS定義内で :hover は :link と :visited の後に記述する必要があります！！
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示しています。
| セレクター | |||||
|---|---|---|---|---|---|
| :hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
注意:IEでは <!DOCTYPE> を宣言しなければなりません。<!DOCTYPE>そうすることで :hover セレクターが有効になります。
関連ページ
CSS チュートリアル:CSS Links
CSS チュートリアル:CSS 疑似クラス
Try it Yourself - Examples
例
アクティブ、訪問済み、未訪問、またはマウスがホバーしているリンク：
a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
試してみる »
例
異なるスタイルのリンク：
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex2:hover,a.ex2:active {font-size:150%;}
試してみる »
その他の拡張