HTMLタグをホバーした際にテキストを表示する方法

方法1: CSSの:hover疑似クラスを使用する方法

HTMLコード:

<div class="hoverable">
  <p>ホバーして表示されるテキスト</p>
</div>

CSSコード:

.hoverable p {
  display: none;
}
.hoverable:hover p {
  display: block;
}

この方法では、HTML要素を囲む親要素に.hoverableクラスを追加し、テキストを非表示にします。そして、親要素がホバーされたときに子要素のテキストを表示するようにCSSを設定します。

方法2: CSSのvisibilityプロパティを使用する方法

HTMLコード:

<div class="hoverable">
  <p>ホバーして表示されるテキスト</p>
</div>

CSSコード:

.hoverable p {
  visibility: hidden;
}
.hoverable:hover p {
  visibility: visible;
}

この方法では、テキストを非表示にする代わりに、テキストの可視性を制御します。親要素がホバーされたときに子要素のテキストの可視性を変更するようにCSSを設定します。

方法3: CSSのopacityプロパティを使用する方法

HTMLコード:

<div class="hoverable">
  <p>ホバーして表示されるテキスト</p>
</div>

CSSコード:

.hoverable p {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hoverable:hover p {
  opacity: 1;
}

この方法では、テキストの透明度を制御して表示/非表示を切り替えます。テキストの初期の透明度を0に設定し、ホバーされたときに透明度を1に変更するようにCSSを設定します。

これらはいくつかの一般的な方法ですが、他にもさまざまな方法があります。どの方法を選ぶかは、デザインの要件や好みによって異なります。ご自身のプロジェクトに最適な方法を選択してください。