Web制作メモ -トップへ-

[jQuery] マウスオーバーイベントを実行する

JavaScript2015.02.04 05:20

プログラムからマウスオーバーイベントを実行するには、mouseenter()mouseleave()を使います。

これを使用すると、自分以外の要素でマウスオーバーイベントを実行できます。

どういった時に役に立つかというと、CSSでカスタマイズできないinput[type=file]をカスタマイズする為に、透明化して画像の上に被せる手法を使う時などです。

画像がマウスオーバーされても、マウスオーバーイベントは上に被せられた透明なinput[type=file]のほうに行ってしまい、実際に見えている画像に伝わってきません。

そういった時に、マウスオーバーイベントをそのまま画像に送ればスマートに解決できます。

下記は画像が直前の兄弟要素に配置されている場合です。

直前の兄弟要素は.prev()で取得します。

直前の兄弟要素でマウスオーバーイベントを実行する

$(document).on('mouseenter', 'input[type=file]', function(){
    $(this).prev().mouseenter();
});
$(document).on('mouseleave', 'input[type=file]', function(){
    $(this).prev().mouseleave();
});