[JavaScript] マウスポインタが触れた/離れたイベントを取得する（onMouseOver, onMouseOut）

投稿日：2016年10月22日更新日：2018年5月2日

オブジェクトにマウスポインタが触れたイベントを取得するにはonmouseover、
マウスポインタが離れたイベントを取得するにはonmouseoutを使用します。

マウスポインタが触れた/離れたイベントを取得する

例）divタグにマウスポインタが触れた時と離れた時に文字を変える

function mouseover(){
  document.getElementById("area1").innerText = "マウスポインタが当たっています。";
}
function mouseout(){
  document.getElementById("area1").innerText = "ここにマウスポインタを当ててください。";
}

function mouseover(){

document.getElementById("area1").innerText = "マウスポインタが当たっています。";

}

function mouseout(){

document.getElementById("area1").innerText = "ここにマウスポインタを当ててください。";

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <div id="area1" onmouseover="mouseover();" onmouseout="mouseout();"/>
    ここにマウスポインタを当ててください。
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

</head>

<body>

ここにマウスポインタを当ててください。

</div>

</body>

</html>

実行サンプル

下の黄色い部分にマウスポインタが当たっている時のみ文字が変わります。

ここにマウスポインタを当ててください。

解説

ポインタが当たった瞬間と外れた瞬間のみイベントが発生します。

執筆者：とら

チャットアプリにメッセージの編集と削除ボタンをつける | 気ままにふりーだむより:

2019年3月29日 2:53 PM

[…] [参考][JavaScript] マウスポインタが触れた/離れたイベントを取得する（onMouseOver, o… [参考]JavaScript 要素を表示/非表示にするサンプル(displayとvisibility) [参考]position:relativeとposition:absoluteで画像や文字を重ねてみよう [参考]jQuery【 CSS 】display を使用した表示・非表示に関するサンプル [参考]【JavaScript】マウスオーバー（ホバー）をトリガーにしたイベント […]

返信

comment コメントをキャンセル