Html 当我将鼠标悬停在标题上时，尝试使图像弹出

当我将鼠标悬停在标题

标记上时，我试图使图像显示出来

这是到目前为止我的CSS：

    .certificate h1{
            text-align:left;
        }

    .certificate:hover, .certificate:hover img{
        visibility:visible;
        z-index:100;
    }

    .certificate img{
        visibility:hidden;
        position:absolute;
    }

下面是我的HTML

<div class="certificate">
    <h1>Title</h1>
</div>
<div class="certificate">
    <img src="./images/image.jpg">
</div>

标题

---

由于某种原因，我的图像仍然没有出现。我是否正在检查右标记上的悬停？

因为悬停的

.certificate

没有图像。把它们放在同一个容器里。另外，由于

.container

中唯一带有image的对象具有带有

位置：绝对的
的image，因此它不提供任何
：hover
空间。因此，从技术上讲，您不能将鼠标悬停在图像的父对象上


。证书h1{
文本对齐：左对齐；
}
.证书：悬停img{
能见度：可见；
z指数：100；
}
.img证书{
可见性：隐藏；
位置：绝对位置；
左：100px；
排名：0；
}

标题
因为悬停的
.certificate
没有图像。把它们放在同一个容器里。另外，由于
.container
中唯一带有image的对象具有带有
位置：绝对的
的image，因此它不提供任何
：hover
空间。因此，从技术上讲，您不能将鼠标悬停在图像的父对象上


。证书h1{
文本对齐：左对齐；
}
.证书：悬停img{
能见度：可见；
z指数：100；
}
.img证书{
可见性：隐藏；
位置：绝对位置；
左：100px；
排名：0；
}

标题