jQueryオブジェクト .mouseleave()

jQueryオブジェクトの mouseleave メソッドは、要素の上に乗っていたマウスカーソルが要素から外れたときに実行するJavaScriptの処理を指定できる。

mouseleave と mouseout の違い

mouseleave と似たイベントに mouseout がある。mouseleave イベントがバブリング（下位の要素で発生したイベントが上位の要素へ伝播する）しないのに対して、mouseout イベントはバブリングする。

mouseout イベントはバブリングするので、子孫要素からマウスカーソルが離れたときにもイベントが発生する。

イベントハンドラの設定

要素からマウスカーソルが降りたときのイベントハンドラを指定する。

jQueryObject.mouseleave(handler)

handler

イベントのハンドラ

on メソッドを使ってイベントハンドラを設定することもできる。

jQueryObject.on('mouseleave', handler)

イベントの発火

mouseleave イベントを発生させる。

jQueryObject.mouseleave()

trigger メソッドを使って mouseleave イベントを発生させることもできる。

jQueryObject.trigger('mouseleave')

サンプル

画像の中にマウスカーソルを出し入れしたときに、不透明度を変更する例を次に示す。

<img src="portrait.jpg" id="portrait">
<script>
  let e = $('#portrait')
  e.mouseenter(function(){
    e.css('opacity', '.5')
  })
  e.mouseleave(function(){
    e.css('opacity', '1')
  })
</script>

参考文献

OpenJS Foundation and jQuery contributors (2022) .mouseleave()