HTMLタグのホバー時にテキストを表示する方法

CSSの:hover疑似クラスを使用する方法: CSSの:hover疑似クラスを使用すると、ホバー時に要素のスタイルを変更することができます。これを利用して、テキストを表示することもできます。以下は例です。

<style>
.hover-text {
 display: none;
}
.hoverable:hover .hover-text {
 display: block;
}
</style>
<div class="hoverable">
 <span>ホバーしてください</span>
 <span class="hover-text">表示されるテキスト</span>
</div>

上記の例では、hoverableクラスを持つ要素がホバーされると、その子要素であるhover-textクラスを持つ要素が表示されます。最初にhover-textクラスの要素は非表示にしておく必要があります。

JavaScriptを使用する方法: JavaScriptを使ってホバー時にテキストを表示する方法もあります。以下は例です。

<style>
.hover-text {
 display: none;
}
</style>
<div onmouseover="showText()" onmouseout="hideText()">ホバーしてください</div>
<script>
function showText() {
 document.getElementsByClassName('hover-text')[0].style.display = 'block';
}
function hideText() {
 document.getElementsByClassName('hover-text')[0].style.display = 'none';
}
</script>

上記の例では、JavaScriptを使用して要素のマウスオーバーとマウスアウトイベントを監視し、それぞれテキストを表示または非表示にします。hover-textクラスを持つ要素を操作しています。