CSSの:hoverでマウスオーバー時のスタイルを設定する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:hover は、ユーザーが要素にマウスポインタを乗せたときに適用されるスタイルを定義するための擬似クラスです。主にボタンやリンクなどのインタラクティブな要素に使用され、視覚的なフィードバックを提供することで、操作性を向上させます。

スポンサーリンク

:hover の値とその効果の一覧

  • :hover – マウスポインタが要素に乗った際に適用されるスタイル。

注意点や関連情報

:hover は、主にデスクトップ環境で使用され、タッチデバイスでは使用されない場合があります。
また、:hover のスタイルは他の擬似クラス（:focus など）より優先される場合がありますので、適切に使い分ける必要があります。

:hoverが効かない理由として考えられること

対象の要素がマウスイベントを受け取れない

:hoverは、マウスのカーソルが対象の要素に重なったときに適用されますが、要素が適切に表示されていない場合や、透明な要素に適用されている場合、マウスイベントが認識されないことがあります。
対策：要素がしっかりと表示され、透明な場合でもpointer-events: none;が設定されていないことを確認します。また、z-indexが適切に設定されているか確認し、要素が他の要素に隠れていないかを確認します。

タッチデバイスで動作していない

:hoverは主にマウスイベントで機能するため、タッチデバイスでは意図した通りに動作しないことがあります。スマートフォンやタブレットでは、マウスホバーの概念がないためです。
対策：タッチデバイスの場合は、:hoverに頼らず、JavaScriptを使用してタップイベントに応じたスタイル変更を実装します。また、メディアクエリでデバイスに応じたスタイルを分けることも有効です。

共通するCSSコード

.css-sample-container {
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}
.css-sample-box {
    padding: 10px;
    border: 2px solid #333;
    background-color: #f0f0f0;
}
.css-sample-box:hover {
    background-color: #ffe082;
    border-color: #ffcc00;
}
.css-sample-link:hover {
    color: red;
    text-decoration: underline;
}

表示例

CSS :hover（div要素の場合）

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box">マウスオーバーしてみてください。</div>
</div>

CSSコード

.css-sample-box:hover {
    background-color: #ffe082;
    border-color: #ffcc00;
}

表示結果

マウスオーバーしてみてください。

この例では、マウスオーバーすると背景色が黄色に変わり、ボーダーの色も変更されます。

CSS :hover（リンクの場合）

HTMLコード

<div class="css-sample-container">
    <a href="#" class="css-sample-link">このリンクにマウスオーバーしてみてください。</a>
</div>

CSSコード

.css-sample-link:hover {
    color: red;
    text-decoration: underline;
}

表示結果

このリンクにマウスオーバーしてみてください。

リンクにマウスポインタを乗せると、文字色が赤に変わり、下線が追加されます。

まとめ

  • :hover は、要素にマウスポインタが乗った際にスタイルを適用します。
  • 主にリンクやボタンなどのインタラクティブな要素で使用され、視覚的なフィードバックを提供します。
  • タッチデバイスでは:hoverがサポートされない場合もあります。
  • 他の擬似クラス（:focus など）と併用する際は、スタイルの優先順位に注意しましょう。
スポンサーリンク