このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

:hover”擬似クラス

記事Jul. 11th,2021
カーソルでホバーされた要素を選択する擬似クラス、“:hover”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

:hover”擬似クラス

:hover”擬似クラスはユーザーがポインティング・デバイスで指し示しているものの、アクティブ化されていない要素を選択する擬似クラスです。

通常、パソコンでは要素の上でマウスのカーソルでホバーさせた時にこの状態になります。タッチスクリーンなどでデバイスの制約によってホバー状態が検知できない場合には“:hover”擬似クラスは選択されません。

要素の子孫要素がホバーされている状態でも“:hover”擬似クラスによって選択されます。

文書の記述言語によってはホバーされている状態を判断する追加の方法を定義している場合があります。例えば、HTMLではラベル付け可能要素は関連付けられたlabel”要素がホバーされていればホバーされていると判断されます。

要素は:any-link”擬似クラス:link”擬似クラス:visited”擬似クラス、“:hover”擬似クラス、:focus”擬似クラス:active”擬似クラスなどの擬似クラスの中から複数の擬似クラスから同時に選択される場合があります。同じ要素に対して複数の擬似クラスを併用する場合にはスタイルが競合することがありますので、記述する順序に気を付ける必要があります。

:hover”擬似クラスはすべての擬似要素にも適用できます。

使用例

textarea {
border: solid 5px #00a381; /**/
}

textarea:hover {
border: solid 5px #fabf14; /**/
}

textarea:focus {
border: solid 5px #e198b4; /**/
}

textarea:active {
border: solid 5px #93ca76; /**/
}
<p><label for="sample">猫が好きですか?:</label></p>
<p><textarea id="sample"></textarea></p>

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
:hover
定義なし

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク