Javascript 在缩略图悬停时显示图像下拉列表，悬停时将其隐藏

我有一个图像缩略图，我希望它显示一个隐藏的div，其中包含相同的图像，但更大，下面有一些描述。当鼠标悬停在缩略图上时，它应该显示隐藏的div，并且只要鼠标悬停在这个div上。但是由于某些原因，它确实有问题：图像有时会被卡住或无法打开。 代码如下：

$（文档）.ready（函数（）{
$（“.dropdown”）.hover（函数（）{
$（this）.children（“.dropdown content”）.delay（800）.show（0）；
}，函数（）{
$（this.children（“.dropdown content”）.hide（）；
});
});

.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.描述{
填充：15px；
文本对齐：居中；
}
下拉图像
描述
在对元素执行操作之前，只需添加.stop（）

$(document).ready(function() {
  $(".dropdown").hover(function() {
    $(this).children(".dropdown-content").stop().delay(800).show(0);
  }, function() {
    $(this).children(".dropdown-content").stop().hide();
  });
});

工作原理：当你乱动它的时候，它会记录你触发了多少次，然后对它进行动画制作。。或者类似的。。因此，
.stop（）
所做的是确保当您处理它时，它首先停止以前的任何动画，并执行新的动画。。因此，如果你愿意，它会擦除它的内存。
这就是你想要的吗


var dropdowncontent=document.getElementById（“下拉内容”）；
函数a（）{
dropdowncontent.style.display=“内联块”；
}
函数b（）{
dropdowncontent.style.display=“无”；
}
。下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.描述{
填充：15px；
文本对齐：居中；
}

下拉图像
描述
我打开Div没有问题，如果我们无法重现问题，我们很难找到问题。当你处理问题时，问题就开始了，例如，单击内容Div内的某个地方，然后单击外部，我的意思是，玩转它，然后在周围单击几下鼠标，它就会重现。简单的悬停就可以了。你也可以看看我的答案吗？哈哈，当然，你的回答太快了，我无法将其标记为接受（前几分钟你不能）是的！只有几毫秒的延迟，直到它出现。（原始代码使用CSS悬停，因此可以跳过javascript）