:hover
hover擬似クラスはマウスカーソルが乗っている要素を選択できるセレクタです。
次のセレクタを指定することで、通常のリンクカラーは赤色ですが、マウスが乗った際に青色に変更され、マウスカーソルが外れたら赤色に戻ります。
a{
color:red;
}
a:hover{
color:blue;
}link擬似クラスやvisited擬似クラスを合わせて指定する場合は、スタイルが上書かれないようにこれらの指定の後に指定するように注意が必要です。
IE6ではhover擬似クラスはa要素以外に指定しても反映されません。
iPhoneやiPadなどのiOSデバイスやAndroidなどのタッチデバイスでは、hover擬似クラスを指定した要素にタッチされた際にスタイルが適応され、他の要素がタッチされた際に元のスタイルに戻ります。
参考URL
6.6.1.2. The user action pseudo-classes :hover, :active, and :focus - W3C
登録日 : 2013年06月09日 最終更新日 : 2013年6月9日
同じカテゴリー(Selector)のエントリー
- 兄弟セレクタ
- 隣接セレクタ
- 子セレクタ
- :not()
- idセレクタ
- classセレクタ
- ::after
- ::before
- ::first-letter
- ::first-line
- :indeterminate
- :checked
- :disabled
- :enabled
- :lang()
- :target
- :focus
- :active
- :hover
- :visited
- :link
- :empty
- :only-of-type
- :only-child
- :last-of-type
- :first-of-type
- :last-child
- :first-child
- :nth-last-of-type()
- :nth-of-type()
- :nth-last-child()
- :nth-child()
- :root
- 属性セレクタ
- 子孫セレクタ
- 要素セレクタ
- ユニーバサルセレクタ