CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでホバー時に要素を表示する方法【サンプルコード付き】

CSSでマウスホバー時に非表示の要素を表示するには、:hover 疑似クラスと隣接兄弟セレクタ（+）を組み合わせるのが一般的です。以下に具体的なコード例を示します。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      margin:20px;
      padding:20px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .hiddenText {
      display: none;
   }
   .hoverDiv:hover + .hiddenText {
      display: block;
      color: rgb(71, 0, 65);
      font-size: 22px;
      font-weight: bold;
   }
</style>
</head>
<body>
<h1>Display an Element on Hover Example</h1>
<div class="hoverDiv" style="font-size: 18px;">Hover over me.</div>
<div class="hiddenText">This text is shown by hovering on the above div</div>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、最初は次のように非表示のテキストだけがレイアウトされた状態で表示されます。

CSSでホバー時に要素を表示する方法【サンプルコード付き】

「Hover over me」というテキストにマウスカーソルを合わせると、隠れていたテキストが下に表示されます。

CSSでホバー時に要素を表示する方法【サンプルコード付き】

仕組みの解説

このテクニックのポイントは、次の2つのCSS宣言です。

  • .hiddenText { display: none; } … 表示・非表示を切り替えたい要素を、あらかじめ非表示にしておきます。
  • .hoverDiv:hover + .hiddenText … 「hoverDiv」クラスの要素にマウスカーソルが乗った（:hover）とき、その直後に隣接する兄弟要素「hiddenText」を display: block; によって表示します。

隣接兄弟セレクタ（+）は「直後に続く兄弟要素」しか選択できないため、表示したい要素はホバー対象の要素のすぐ後ろに配置する必要があります。離れた位置にある要素を切り替えたい場合は、JavaScriptを使用するか、比較的新しいCSSの :has() セレクタを活用するとよいでしょう。

  1. CSSでホバー時にトランジション（アニメーション）を追加する方法を解説

    CSSでホバー時にトランジション（滑らかなアニメーション効果）を追加するには、transitionプロパティと:hover疑似クラスを組み合わせて使用します。あらかじめ要素にtransitionを設定しておくことで、ホバー時の変化が瞬時に切り替わるのではなく、指定した時間をかけてスムーズに変化するようになります。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q

  2. CSSアニメーションで要素を円形の軌道上に移動させる方法

    CSSアニメーションを活用すると、rotate（回転）とtranslate（平行移動）を組み合わせることで、要素をさまざまな方法で動かすことができます。 本記事では、このテクニックを応用して、要素を円形の軌道（サーキュラーパス）に沿って移動させる方法を解説します。 円形移動の仕組み ポイントは、@keyframesの中で以下の3つの変換を組み合わせることです。 rotate()：要素を回転させ、移動する向きを決める translateX()：回転させた方向へ要素を押し出し、中心からの距離を作る rotate()（逆回転）：要素自体の傾きを打ち消し、常に直立した状態を保つ アニメーションの進