HTMLでマウスがdiv上にあるときにJavaScriptを実行する方法

まず、div要素にマウスオーバーイベントを追加する必要があります。これには、onmouseover属性を使用します。以下は、div要素にマウスオーバーイベントを追加する例です。

<div onmouseover="myFunction()">マウスを乗せる</div>

次に、JavaScriptの関数を作成し、マウスオーバーイベントが発生したときに実行するアクションを定義します。以下は、myFunctionという名前の関数を作成し、アラートメッセージを表示する例です。

<script>
function myFunction() {
  alert("マウスがdiv上にあります！");
}
</script>

これで、マウスがdiv要素の上にあるときにアラートメッセージが表示されるようになります。

さらに、より複雑なアクションを実行するためのコード例をいくつか紹介します。

例1: マウスオーバー時にdivの背景色を変更する

<style>
  .highlight {
    background-color: yellow;
  }
</style>
<script>
  function highlightDiv() {
    var div = document.getElementById("myDiv");
    div.classList.add("highlight");
  }
  function resetDiv() {
    var div = document.getElementById("myDiv");
    div.classList.remove("highlight");
  }
</script>
<div id="myDiv" onmouseover="highlightDiv()" onmouseout="resetDiv()">マウスを乗せる</div>

この例では、マウスがdivの上にあるときに背景色が黄色に変わり、マウスが外れると背景色が元に戻ります。

例2: マウスオーバー時にテキストを表示する

<script>
  function showText() {
    var textElement = document.getElementById("myText");
    textElement.style.display = "block";
  }
  function hideText() {
    var textElement = document.getElementById("myText");
    textElement.style.display = "none";
  }
</script>
<div onmouseover="showText()" onmouseout="hideText()">マウスを乗せる</div>
<p id="myText" style="display: none;">ここに表示するテキスト</p>

この例では、マウスがdivの上にあるときにテキストが表示され、マウスが外れるとテキストが非表示になります。

これらの例を参考にして、特定のアクションを実行するためのさまざまな方法を試してみてください。