CSS显示：无和：悬停可见性

我试图在另一图像悬停时显示图像。所有的Safari浏览器都可以正常运行，但是Chrome和Firefox的效果很好，图片占位符可以被看到，但是它们无法加载图片。我搜索了其他地方，发现了关于可见性的主题：隐藏等，但没有涉及这个问题的跨浏览器。CSS显示：无和：悬停可见性

这里的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; 

    }

非常感谢所有帮助，谢谢。

来源

2012-06-04 SeamusH

你试过'z-index'吗？请在[Fiddel]（http://jsfiddle.net/）上创建演示。 –

使用Firefox中的Firebug检查图像。然后将鼠标悬停在图片源上，看看是否显示“无法加载URL”。那将是一个开始... –

Tooraj，有人打败了我！请参阅下面的@ Surendra。现在尝试z索引。 – SeamusH

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

来源

2015-03-15 01:57:38 SeamusH

我将z-index添加到.propic跨度css &更改左边&悬停后右跨度在jsfiddle窗口中正确查看。

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

我不知道它会帮助你。我想你只想这样。

来源

2012-06-04 12:20:40 SVS

谢谢！我已经放了一个z索引，但它没有奏效。但是，自从我做了很多改变之后，我现在就试试看，谢谢:) – SeamusH

z-index不幸运行。在Chrome中，由于某种原因，资源没有加载.. – SeamusH

我在Chrome和Firefox上测试了这个提琴，它的工作正常，可能是您使用的是旧版本。这个小提琴在你的浏览器中工作正常吗？ – SVS

我试用了您的示例代码......并且在一次小编辑之后，它似乎在Chrome中正常工作。

我不得不从../images/image.jpg改变你的路径图像/ image.jpg的

你用Chrome的开发者工具，看是否资源（图像）的正常加载？

来源

2012-06-04 12:27:04 urbanlemur

感谢您的回复！我试图改变你的路径，无济于事。现在将检查开发工具。 – SeamusH

图片未正确加载..我第一次遇到这个问题，想法？ – SeamusH

你是否处于可以使用jQuery的状态？或者你是否仅限于使用css？我也注意到，我的审判，虽然它在铬，火狐和Safari浏览器工作，它倒下了即。 – urbanlemur

CSS显示：无和：悬停可见性

回答

相关问题