Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

トップページ
CSSプロパティ辞典
【CSSセレクタ】E:hover

【CSSセレクタ】E:hover

『セレクタ:hover』で、要素に対してマウスホバーされている間だけに適用できます。こちらは一般に『擬似クラス』(:hover擬似クラス)と呼ばれます。スマホではタッチして指を離した瞬間などに反応したりすることがありますが、そもそもマウスカーソル用の処理となりますのでスマホでは使用を避けたほうが無難です。

対象となる要素にマウスホバー(マウスオーバー)されている間だけにCSSスタイルが当たり、マウスアウトされた場合は元のスタイルに戻ります。なのでJavaScriptのホバーイベント処理の時のように元に戻す記述などを別途用意する必要はありません。

尚、他の擬似クラスに上書きされる可能性がありますので、記述する順番にご注意ください。『:link』、『:visited』、『:hover』、『:active』の順番(『LVHA』の順)で記述するとバッティングせずにスタイルを適用させることができます。

サンプルコード

div:hover { color: red;} /* div要素がマウスホバーされている間だけ文字を赤色にします。 */
p:hover { color: blue;} /* p要素がマウスホバーされている間だけ文字を青色にします。 */
p:hover span { color: orange;} /* p要素がマウスホバーされている間だけ子要素のspan要素の文字をオレンジ色にします。 */
*:hover { font-size: 20px;} /* 全ての要素がマウスホバーされている間だけ文字を大きくします。 */

ブラウザでの表示結果

div:hover { color: red;} /* div要素がマウスホバーされている間だけ文字を赤色にします。 */
p:hover { color: blue;} /* p要素がマウスホバーされている間だけ文字を青色にします。 */
p:hover span { color: orange;} /* p要素がマウスホバーされている間だけ子要素のspan要素の文字をオレンジ色にします。 */
*:hover { font-size: 20px;} /* 全ての要素がマウスホバーされている間だけ文字を大きくします。 */

<div>ここはdiv要素です。</div>
<p>ここはp要素です。</p>
<p>ここはp要素です。<span>ここはp要素の子要素のspan要素です。</span></p>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ