Element: mouseout イベント

mouseout イベントは、ポインティングデバイス (通常はマウス) を使ってカーソルを移動させ、要素やその子の中からカーソルが出たときに、その要素 (Element) に発行されます。

mouseout は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。

バブリング あり
キャンセル 可
インターフェイス MouseEvent
イベントハンドラープロパティ onmouseout

例

以下の例は mouseout イベントの使い方を示しています。

mouseout と mouseleave

以下の例は、mouseout と mouseleave の各イベントの違いを説明しています。mouseleave イベントを <ul> に追加し、マウスが <ul> を出るたびにリストを紫色に着色するようにします。mouseout をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。

これを試してみると、mouseout はそれぞれのリスト項目に配信されるのに対し、 mouseleave は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある <ul> を不明瞭にします。

HTML

html

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

JavaScript

js

let test = document.getElementById("test");

// マウスが <ul> を出るとリストを一時的に紫色にします
// ときに 1 度だけ実行されます
test.addEventListener("mouseleave", function( event ) {
  // mouseleave の対象を強調
  event.target.style.color = "purple";

  // 少し待ってから色をリセット
  setTimeout(function() {
    event.target.style.color = "";
  }, 1000);
}, false);

// マウスが出ると <li> を一時的にオレンジ色にします
test.addEventListener("mouseout", function( event ) {
  // mouseout の対象を強調
  event.target.style.color = "orange";

  // 少し待ってから色をリセット
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);

結果

仕様書

Specification
UI Events
# event-type-mouseout
HTML Standard
# handler-onmouseout

ブラウザーの互換性

BCD tables only load in the browser

関連情報