我试图用纯色框和顶部的图标制作画廊，当您将鼠标悬停在框上时，纯色变为图像，并且图标仍然存在。
实际上，我在上一个问题上得到了一个不错的答案，但没有使网站保持响应。所以我想我找到了解决这个问题的方法，但我似乎找不到让图标保持在顶部的方法。
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/
使用的图像仅用于演示目的，而不是将要使用的实际图像。