Javascript 鼠标悬停时的模糊/小车div

我有以下代码：

<div id="area">
  <p>
    Area here
  </p>
</div>

SCSS：

当我将鼠标悬停在该区域上时，该区域正在变化，其高度应小于原始高度。但当悬停动作从页面底部一直到div时，高度会变得模糊

本期视频：

小提琴：

这种情况的发生是因为在进行悬停动作时改变了高度，但是什么是防止其小车部分的最佳方法呢？ 这就是我尝试过的：

$('#area').on('mouseleave', function(event){
  $('#area').stop().removeClass('active');
  e.stopImmediatePropagation();
  e.preventDefault();
});

---

问题是这里的事件发生得太快了

如果对CSS转换应用延迟，它将修复闪烁。 由你来调整它

.stop仅对jQuery动画有效。。。对添加/删除类没有影响

$'area'。在'mouseenter'上，functionevent{ $'area'.addClass'active'； }; $'area'。在'mouseleave'上，functionevent{ $'area'。移除类'active'； }; 区域{ 高度：100px； 宽度：500px； 背景：蓝色； 转换：0.6s；/*转换延迟*/ /*SCSS &.主动{ 高度：50px； } */ } 面积.活动{/*SCSS等效物（例如SO）*/ 高度：50px； } 这里

---

它工作得好一点，但它仍然是一种“马车”：。在这种情况下，由于以下要求，过渡效果不是最好的：/。也许可以通过jquery的延迟来防止这种情况发生吗

#area{
  height:100px;
  width:500px;
  background:blue;

  &.active{
    height:50px;
  }
}

$('#area').on('mouseleave', function(event){
  $('#area').stop().removeClass('active');
  e.stopImmediatePropagation();
  e.preventDefault();
});