CSSホバーセレクターの説明(例付き)

CSS:hoverセレクターは、要素のスタイル設定に使用される多くの疑似クラスの1つです。:hoverユーザーがカーソルまたはマウスの上に置いた要素を選択するために使用されます。リンクだけでなく、すべての要素で使用できます。

リンクのスタイルを設定するために使用される場合、:hover多くの場合:link、未訪問、訪問済み、およびアクティブなリンクをそれぞれスタイル設定する、、、:visitedおよび:activeセレクターとペアになります。

場合:link:visitedルールはCSSの定義であり、:hoverそれらの後に落ちる必要があります。そうし:hoverないと、ルールのスタイルは選択した要素に適用されません。

構文:

a:hover { /* CSS declarations */ }

ホバーセレクターは、要素がホバー状態に入るときに、ルールで提供されるスタイルのみを適用します。これは通常、ユーザーがマウスで要素にカーソルを合わせたときです。

button { color: white; background-color: green; } button:hover { background-color: white; border: 2px solid green; color: green; }

上記の例では、ボタンの通常のスタイルは、緑色のボタン上の白いテキストです。ユーザーがマウスでボタンにカーソルを合わせると、:hoverセレクターのルールがアクティブになり、ボタンのスタイルが変更されます。

:hoverタッチスクリーンでは問題が発生する可能性があることに注意してください。ハードウェアとモバイルブラウザの実装が異なると、疑似クラスがトリガーされる場合とトリガーされない場合があります。:hoverできるだけ多くの異なるモバイルブラウザやデバイスで要素を徹底的にテストしてください。