Javascript jquery：删除a<；部门>；堆叠在另一个之上<；部门>；在mouseenter上，并恢复该功能<；部门>；在mouseleave上

以下是挑战：

在一个HTML文件中，有两个div层叠在一起。顶部的div大部分是透明的，使用CSS。底部的div有一个图像作为背景。在mouseenter上，我希望上面的div消失，在mouseleave上，我希望上面的div回来

$（文档）.ready（函数（）{
$（'.dimmer'）。在（'mouseenter'，事件=>{
$（this.hide（）；
}).on（'mouseleave'，事件=>{
$（this.show（）；
});
});
。体验{
背景：url（“cmu-110.png”）无重复中心；
高度：110px；
宽度：110px；
z指数：2；
}
.调光器{
背景：rgba（23823823825）；
位置：相对位置；
顶部：-128px；
z指数：3；
}

我相信底部div上的jquery.on（“mouseout”，handler）”应该足以使顶部div可见/淡入

这篇文章应该能帮助你：

如果不行（如果不行），我会做/建议：

当鼠标进入顶部分区时，激活setTimeout轮询功能或.mouseMove，该功能大约每1秒运行一次，用于检查鼠标位置并隐藏顶部分区
如果鼠标不在底部div（mousemove）上，则显示顶部div并禁用轮询
你可以在这个论坛上搜索如何编写setTimeout轮询函数等。如果我周末有时间，我会尝试一下

相信这会有所帮助。
您可以在mouseenter和mouseleave上将css可见性属性设置为hidden和visible。我在两个div之间留出一些空间，使效果清晰可见


$（文档）.ready（函数（）{
$（'.dimmer'）.on（'mouseenter'，（）=>{
$（'.dimmer'）.css（“可见性”、“隐藏”）；
}).on（'mouseleave'，（）=>{
$（'.dimmer'）.css（“可见性”、“可见”）；
});
});
。体验{
背景：红色；
高度：110px；
宽度：110px；
z指数：0；
}
.调光器{
背景：蓝色；
位置：绝对位置；
顶部：-10px；
高度：110px；
宽度：110px；
z指数：1；
}


jQuery（文档）.ready（函数（）{
jQuery（“.dimmer”）。打开({
鼠标指针：函数（）{
jQuery（this）.css（'opacity'，'0'）；
},
mouseleave:function（）{
jQuery（this）.css（'opacity'，'1'）；
}
});
});
。体验{
背景：url（“http://lorempixel.com/400/200/）无重复中心；
高度：110px；
宽度：110px；
z指数：2；
}
英帕兰特先生{
位置：相对位置；
高度：110px；
宽度：110px；
}
.调光器{
背景：rgba（23823823825）；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
z指数：3；
过渡：不透明度320ms；
}
您根本不需要使用jQuery或javascript来实现这一点。您可以使用单个div、伪元素和悬停样式执行此操作：


.container{
位置：相对位置；
高度：110px；
宽度：110px；
背景图像：url（“https://randomuser.me/api/portraits/men/41.jpg");
}
.容器：：之前{
内容：''；
显示：块；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景色：rgba（0,0,0,0.5）；
过渡：不透明度0.4s；
}
.container:hover:：before{
不透明度：0；
}
您特别询问了jQuery的实现方法，并提到您正在学习它，因此您可能已经知道如何仅在CSS中实现这一点，在这种情况下，我向您道歉。