jquery - mouseenter mouseleave が兄弟要素で正しく起動しない

Question

私は 3 つの要素を持っています。これらはすべて兄弟ですが、それらは互いに重なっています。これらで mouseenter/mouseleave を使用したかったのですが、期待どおりに機能しません。(最上位の要素のみが mouseenter/mouseleave を起動しています)。兄弟要素を処理するためのネイティブ jQuery メソッドはありますか? すべての単一の mousemove イベントにバインドされているすべての要素をチェックすることは避けたいと思います。

----------- OUTER ELEMENT --------------
|                                      |
|  -------  -------                    |
|  |  A  |  |  B  |                    |
|  -------  -------                    |
|                                      |
----------- OUTER ELEMENT --------------

html として定義:

<div class="outerelement"></div><!-- position absolute, etc -->
<div class="a"></div><!-- position absolute, etc -->
<div class="b"></div><!-- position absolute, etc -->

JavaScript:

$('div').on('mouseenter mouseleave', function(e) {
    switch (e.type) {
       case 'mouseenter':
         $(this).addClass('hover');
         break;
       case 'mouseleave':
         $(this).removeClass('hover');
         break;
    }
});

ここでjsFiddle

最終的には、A/B を正しく超えると mouseenter/leave が発火しますが、外側の要素に対して発火するはずですが、そうではありません ....