CSS - 图像和悬停无法正常工作

Question

我在页面上有一张图片，当我悬停时，图片应该显示不同的颜色。悬停本身有效，但原始图像位于悬停图像之上。我尝试设置 z-index 但无法正常工作。

这是 CSS:

    #login, #logout { 
float:left;
padding: 0px 10px; 
margin-left:5px;
margin-top:15px;
z-index:1;
}

#login:hover{
background:transparent url('../images/skin/loginhover.png') no-repeat 0px 0px;
float:left;
padding: 0px 10px; 
margin-left:15px;
margin-top:15px;
z-index:10;
}
#logout:hover{
background:transparent url('../images/skin/logouthover.png') no-repeat 0px 0px;
float:left;
padding: 0px 10px; 
margin-left:15px;
margin-top:15px;
z-index:10;
}

感谢您的帮助和建议!

Answer 1

我可以建议您改用 CSS Sprite 。我相信它们是实现您想要的目标的更有效方法。

与其“重新发明轮子”并在此处写下如何做，不如看看 http://sixrevisions.com/css/css-sprites-site-speed/或者只是谷歌“CSS Sprites”。

它们减少了 HTTP 请求，因此减少了您网站使用的带宽量。

希望对您有所帮助。如果没有，请发表评论，我会尝试提出更好的选择。

干杯，马修