Question

我试图用纯色的盒子和它上面的图标制作一个图库，当你将鼠标悬停在盒子上时，纯色会变为图像，图标仍然存在。

在上一个问题上，我实际上得到了一个不错的答案，但没有保持网站的响应能力。所以我想我找到了解决这个问题的方法，但我似乎无法找到一种方法让图标保持在最顶层。

HTML：

<div class="icon">
    <img src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" onmouseover="this.src='http://lolhit.com/img/ups/98581662041324299463.jpeg'" onmouseout="this.src='http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif'" />
</div>

CSS： .icon { background: url(http://loosewire.org/wp-content/uploads/blue-icon-transparent-background-500px.png) no-repeat center; display: inline-block; }

我也做了一个小提琴，只是为了清楚，我希望永远处于最顶层的.icon，盒子能够在悬停时更改为图像：http://jsfiddle.net/baardkolstad/2L44J/

使用的图像仅用于演示目的，而不是将要使用的实际图像。

Answer 1

我认为你应该看看在这里使用z-index： http://www.w3schools.com/cssref/pr_pos_z-index.asp

请注意，这仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。这也在上面的网页上。

Answer 2

好的，我的最终解决方案是将图标放在img标签中，并将这两张照片用作CSS中的背景。通过这种方式，您可以始终将图标置于中心位置，同时保持最佳状态。

感谢您对此事的所有帮助！

为什么图标不显示在顶部？

2 个答案: