Question

我正试图在另一张图像悬停时显示图像。一切都适用于Safari，但使用Chrome和Firefox，效果正常，图像占位符可以看到，但无法加载图像。我在其他地方搜索并发现了与可见性有关的主题：隐藏等，但没有一个跨浏览器处理此问题。

这是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中的开发者工具来查看资源（图片）是否正确加载？

Answer 2

我将z-index添加到.propic span css＆amp;改变左边和左边悬停后跨度的权限，以便在jsfiddle窗口中正确查看。

在此处查看：http://jsfiddle.net/UH54X/1/

我不确定它会对你有所帮助。我想你只想这样。

Answer 3

原来图像是已重命名为.jpg的.tiff文件。 Chrome＆amp; Firefox似乎不喜欢这样，并且拒绝将它们识别为可检索文件。

CSS display：none和：悬停可见性

3 个答案: