[解決済み] 子要素によるマウスアウトイベントを無効にするには？

質問

問題を具体的に説明します。

要素にカーソルを合わせたときに、絶対位置指定されたdivを表示したい。これは jQuery を使えば本当に簡単で、うまく動作します。しかし、マウスが子要素の 1 つにかかると、子要素を含む div の mouseout イベントがトリガーされます。子要素にマウスを乗せたときに、javascript が包含要素の mouseout イベントをトリガーしないようにするにはどうすればよいでしょうか。

jQueryでそれを行うための最良かつ最短の方法は何でしょうか？

ここで、私が言いたいことを説明するために、簡略化した例を示します。

Htmlです。

<a>Hover Me</a>
<div>
  <input>Test</input>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

Javascript/jQueryを使用しています。

$('a').hover( function() { $(this).next().show() }
              function() { $(this).next().hide() } );

どのように解決するのですか？

少し古い質問ですが、先日こんなことに遭遇しました。

最近のバージョンのjQueryでこれを行う一番簡単な方法は mouseenter と mouseleave イベントではなく mouseover と mouseout .

ですぐに動作テストができます。

$(".myClass").on( {
   'mouseenter':function() { console.log("enter"); },
   'mouseleave':function() { console.log("leave"); }
});