CSS 显示 :none and :hover visibility

Question

我试图在另一张图片悬停时显示一张图片。在 Safari 上一切正常，但在 Chrome 和 Firefox 上，效果有效并且可以看到图像 placeholder ，但它们无法加载图像。我在别处搜索并找到了与 visibility:hidden 等相关的主题，但没有一个是跨浏览器处理这个问题的。

这是 HTML:

    <div class="profile-picture-wrap">
<a class="propic">
<img src="../images/propicsmall.jpg" width="142" height="194">
<span><img src="../images/profilepic.jpg" width="290" height="186" /></span></a>
</div>

这是 CSS:

    .propic span{
position:absolute;
padding: 5px;
top: 10px;
left: 10px;
display: none;
color: black;
text-decoration: none;
     }

    .profile-picture-wrap:hover .propic span{
display: block;
position:absolute;
top: -3px;
right: 900px;
left:  640px;

     }

非常感谢任何帮助，谢谢。

Answer 1

我尝试了您的示例代码……经过一点小小的修改，它似乎在 Chrome 中运行良好。

我必须将您的路径从 ../images/image.jpg 更改为 images/image.jpg

您是否使用 Chrome 中的开发者工具查看资源(图片)是否正确加载？