1

当另一个图像悬停时，我试图显示一个图像。在 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;

     }

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

4

3 回答 3

1

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

我不得不将您的路径从 ../images/image.jpg 更改为 images/image.jpg

您是否使用过 Chrome 中的开发者工具来查看资源（图像）是否正确加载？

于 2012-06-04T12:27:04.443 回答
0

我将 z-index 添加到 .propic span css 并在悬停后更改 span 的左右两侧以在 jsfiddle 窗口中正确查看。

在这里检查：http: //jsfiddle.net/UH54X/1/

我不确定它会帮助你。我想你只想要这样。

于 2012-06-04T12:20:40.597 回答
0

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

于 2015-03-15T01:57:38.937 回答