ホームページ > 記事 > ウェブフロントエンド > JavaScriptでのマウスオーバーイベントの使い方を詳しく解説

JavaScriptでのマウスオーバーイベントの使い方を詳しく解説

不言オリジナル: 2019-01-07 15:27:2326944ブラウズ

mouseoverイベントは、その名前で表される要素にマウスカーソルが重なったときにトリガーされるイベントです。この記事では、JavaScriptでのmouseoverイベントの使い方を詳しく紹介します。

まず見てみましょうonmouseover とは何ですか?

mouseover アクティビティは「イベント」であり、onmouseover はイベントハンドラーです。

イベントハンドラは、イベント発生時に実行する処理を指定する必要があります。

つまり、onmouseover は、マウスカーソルが要素の上に置かれたときの処理を担当するイベントハンドラーです。

onmouseleaveとは何ですか?

onmouseover に加えて、onmouseleave もあります。

名前が示すように、マウスカーソルが要素から離れたときにトリガーされるイベントを処理します。

これら 2 つの属性は、次の例で使用されます。マウスホバーイベントの使用方法のコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
     <div id="div1" style="width: 150px; height: 150px; padding: 10px; background-color:pink; border: 1px solid #000000" onmouseover="over(this)" onmouseleave="leave(this)"></div>
</body>
<script>
    function over(x) {
        x.style.backgroundColor = "blue";
    }
 
    function leave(x) {
        x.style.backgroundColor = "red";
    }
</script>
</html>

上記のコードでは、まず div タグを使用して単純なものを作成します。正方形の。

ブロックの背景色は薄ピンクに指定されています。

JavaScriptでのマウスオーバーイベントの使い方を詳しく解説