JavaScript - マウスホバーイベント

JavaScriptでマウスホバーによる操作イベントを実装する簡単なコード例です。

HTMLには、マウスホバーによるイベントを検出する対象として<div>タグにid名「target」を指定しています。

<div id="target"></div>

CSSでは、マウスホバー操作の対象範囲とするためのサイズを設定しています。

#target {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
	user-select: none;
	transition: 1s;
	background: #ff7f50;
}

対象とする要素はquerySelector()で指定、addEventListener()の「mouseover」を使ってマウスカーソルが要素の上にある際のイベントを実装しています。
また「mouseleave」を利用してマウスカーソルが要素の上から離れた時に実行するイベントを追加しています。

// マウスホバーインのイベントを実装
document.querySelector('#target').addEventListener('mouseover', () => {
	// ターゲット要素内のHTMLを変更
	document.querySelector('#target').innerHTML = 'Mouse<br>Over';
});

// マウスホバーアウトのイベントを実装
document.querySelector('#target').addEventListener('mouseleave', () => {
	// ターゲット要素内のHTMLを変更
	document.querySelector('#target').innerHTML = '';
});