Caution

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

CSSプロパティ辞典

  1. トップページ
  2. CSSプロパティ辞典
  3. 【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系 標準ブラウザ

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

シェア
このエントリーをはてなブックマークに追加