Css div在其上方悬停时消失

我想在图像上添加一个div，当用户将鼠标放在div上时，div会显示出来，但当我将鼠标移到div上时，它会显示一秒钟，然后消失。 html代码：

解决的问题：

---

用position:relative（相对）替换了页边顶部，我相当确定过渡：1s不透明度；应为过渡：不透明度1s；编辑：我站在更正，它仍然有效。我把你的代码放在一个JS提琴里，为了让它正常工作，我不得不删除的那行代码是我没有图像的页边空白add@Jhecht你可以试试占位符图片，这就是你得到的行为吗？谢谢@Jhecht，是的，诸如此类。

<img src="image.png" id="image" />
<div id="div1">div1
<div id="div2">div2</div>
</div>

#image
{
display: block;
}
#div1
{
transition: opacity 1s;background-color: red;margin-top: -100px;opacity: 0;
}
#div1:hover
{
opacity: 1;
}
#div2
{
background-color: blue;
}