onmouseoverイベント

DOM イベント MouseEvent

定義と使用法

onmouseoverイベントは、マウスカーソルが要素またはその子要素に移動したときに発生します。

ヒント：このイベントは通常、 onmouseout イベント一緒に使用すると、ユーザーが要素からマウスカーソルを外れたときに発生するイベントです。

実例

例1

マウスカーソルを画像に移動すると、JavaScriptを実行します：

<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">

自分で試してみてください

例2

この例では、onmousemove、onmouseenterおよびmouseoverイベントの違いを示しています：

<div onmousemove="myMoveFunction()">
  <p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseenter="myEnterFunction()">
  <p id="demo2">I will demonstrate onmouseenter!</p>
</div>
<div onmouseover="myOverFunction()">
  <p id="demo3">I will demonstrate onmouseover!</p>
</div>

自分で試してみてください

文法

HTMLで：

<element onmouseover="myScript">

自分で試してみてください

JavaScriptで：

object.onmouseover = function(){myScript};

自分で試してみてください

JavaScriptでaddEventListener()メソッドを使用する方法：

object.addEventListener("mouseover", myScript);

自分で試してみてください

注記：Internet Explorer 8またはそれ以前のバージョンではサポートされていません addEventListener()メソッド。

技術的詳細

バブル： サポート
キャンセル可能： サポート
イベントタイプ： MouseEvent
サポートされているHTMLタグ： すべてのHTML要素は、以下の要素を除いています：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>および<title>。
DOM バージョン： レベル2 イベント

ブラウザサポート

イベント Chrome IE Firefox Safari Opera
onmouseover サポート サポート サポート サポート サポート
DOM イベント MouseEvent