ホバー時にテキストコンテンツを追加する方法

1. CSSのみを使用する方法: CSSの:hover疑似クラスを使用して、ホバー時にテキストコンテンツを表示します。以下は例です。

HTMLコード:

<div class="hover-container">
  <div class="content">元のコンテンツ</div>
  <div class="hover-content">ホバー時に表示するコンテンツ</div>
</div>

CSSコード:

.hover-container {
  position: relative;
}
.hover-content {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.hover-container:hover .hover-content {
  display: block;
}

2. JavaScriptを使用する方法: JavaScriptを使用して、ホバー時にテキストコンテンツを追加します。以下は例です。

HTMLコード:

<div class="hover-container" onmouseover="showHoverContent()" onmouseout="hideHoverContent()">
  <div class="content">元のコンテンツ</div>
  <div class="hover-content">ホバー時に表示するコンテンツ</div>
</div>

JavaScriptコード:

function showHoverContent() {
  var hoverContent = document.querySelector('.hover-content');
  hoverContent.style.display = 'block';
}
function hideHoverContent() {
  var hoverContent = document.querySelector('.hover-content');
  hoverContent.style.display = 'none';
}

これらはホバー時にテキストコンテンツを追加するための基本的な方法です。必要に応じて、デザインや動作をカスタマイズすることもできます。