将元素鼠标悬停在另一个元素的顶部而不触发底部元素上的mouseout

Question

我有两个元素，一个绝对位于另一个元素之上。当鼠标滚过顶部的元素时，它会触发原件上的mouseout（或mouseleave）。上部元素不是下部元素的子元素。

以下是一个例子：http://jsfiddle.net/mattcoady/ZCWvJ/816/

有没有办法让底部元素（大灰框）的mouseout / leave事件忽略覆盖元素（红框），而让顶部元素可点击？ （意思是我可以＆＃39; 在覆盖元素上使用指针事件无。）

$('#my_div').bind("mouseover mouseenter mouseout mouseleave", function (e) {
    var el = $("#" + e.type);
    var n = + el.text();
    el.text(++n);
});

document.querySelector('.cover').addEventListener('click', function(){alert('clicked')});