Javascript jQuery-调用onmouseout函数，但仅当光标未移动到某个区域时

我有这个链接：

<a class='itemshow'>Show Details</a>

---

应该不会太复杂，但是如果没有任何复杂的破解，我就不知道该怎么做。

这类问题通常通过一个小的超时来解决，如果鼠标进入某个元素，超时就会被清除。比如：

var timer;

$('a.itemshow, #gen_details').on({
    mouseenter: function() {
        clearTimeout(timer);
        $("#gen_details").slideDown(300);
    },
    mouseleave: function() {
        timer = setTimeout(hideGen, 200);  
    }
});

function hideGen() {
    $("#gen_details").slideUp(300);
}

---

​

不需要计时器之类的东西。您只需将mouseover函数设置为同时选择链接和div。因此，如果您将鼠标悬停在包含div的区域上，它将执行默认操作并远离div或链接，则会调用mouseout处理程序，但不确定您是否理解我的意思

小提琴：

---

在小提琴上很好，但在我的页面上不行。你看，我已经有一个悬停事件，它会在2秒后打开div，正确定位等等。当我将你的mouseleave事件添加到该事件中时，它会在我离开链接时以200毫秒的超时关闭div，而不管div是什么。我尝试拉小提琴时，由于某种原因我无法找出错误：

var timer;

$('a.itemshow, #gen_details').on({
    mouseenter: function() {
        clearTimeout(timer);
        $("#gen_details").slideDown(300);
    },
    mouseleave: function() {
        timer = setTimeout(hideGen, 200);  
    }
});

function hideGen() {
    $("#gen_details").slideUp(300);
}

<a href="www.twitter.com" class="tester"><img src="https://blog.twitter.com/sites/all/themes/gazebo/img/twitter-bird-white-on-blue.png" /></a>

<div style="width:200px; height: 100px; background-color:black; clear:none;" class="myblock"></div>