HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


マウスが上にあるときの書式を指定する

CSSの書き方

セレクタ:hover { プロパティ:値; プロパティ:値; …; }

CSSの詳細情報
対象 すべての要素
CSSレベル CSSレベル2 対応ブラウザ Windows MAC
継承 -- IE 5.0以上(※)/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

マウスポインタが上にあるときに要素の書式を変えるスタイルシートです。色を変えたり、背景に色を付けたりすることができます。なお、「a:hover」という書き方はプロパティではなく、プロパティを指定するクラスのような働きをします。「動的擬似クラス」と呼ばれ、多くの要素に働きます。

プロパティ

したがって、リンクテキストの色を変えたり背景色を付けたりするには、CSSの書き方にもあるようにこれらのプロパティを別途指定しなければなりません。

クラスやID別に指定する

この動的擬似クラスは、クラスやIDを指定することによって、特定の部分でのみ書式を変えたりするということができます。IDを指定する場合は、「セレクタ#ID名:hover」のように、クラスで指定する場合には「セレクタ.class名:hover」のように書きます。また、特定の要素にのみスタイルシートを適用したい場合は、「セレクタ:hover 要素名」のように書きます。

IEはリンク要素のみ

InternetExplorerでは、この動的擬似クラスによる指定は、リンク要素にのみしか働きません。したがって、InternetExplorerでは「a:hover」という書き方にしか対応しておらず、例えば「p:hover」としても、段落要素の上では何も起こりません。

CSS/HTMLサンプル

a:hover { color:red; background-color:#ffdff9; }

リンクにマウスが乗ると、文字列の色と背景色が変わる サンプル