“:hover”擬似クラス｜CSSセレクタ｜CSS－havin' a coffee break

＃

“: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; /*■*/


}