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

我有一个页面上的图像，当我悬停的图像应该显示不同的颜色。悬停本身可以工作，但原始图像位于悬停图像的顶部。我已尝试设置z索引，但无法正常工作

以下是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;
}

---

谢谢你的帮助和建议

我建议您改用CSS精灵。我相信它们是实现你想要的更有效的方法

与其说“我们发明了轮子”并在这里写下如何实现，不如看看谷歌的“CSS精灵”

它们减少了HTTP请求，从而减少了站点使用的带宽

希望有帮助。如果没有，请发表评论，我将尝试提出一个更好的选择

干杯，

---

Matthew

最好将原始图像和悬停状态放在同一元素上。现在，原始图像是包含在链接标记中的图像，因此它位于顶部

这样做

删除图像

将此CSS添加到#登录

最好将两个图像放在同一个图像（精灵）上，只需更改悬停时的背景位置即可。这消除了首次悬停时图像加载时的闪烁。看看马修关于这个问题的另一个答案

---

删除悬停css并将图像更改为：

<img height="26" width="80" alt="LOGIN" src="/images/skin/login.png" onmouseover="switchImageIdOver(this,'../images/skin/loginhover.png');" onmouseout="switchImageIdOut(this,'/images/skin/login.png'); />

---

如果你像我一样，不喜欢使用精灵：

我想出了一个快速而简单的方法来获得相同的效果（图像淡入颜色）。唯一的缺点是你需要一个透明的PNG，但是可以与许多按钮或社交媒体图标配合使用

HTML:

CSS:

---

如果您喜欢，请告诉我。

这也可以解决对齐问题。谢谢您的建议和帮助。我让它像精灵一样工作。谢谢@没问题，很高兴能帮上忙。谢谢，我会试试的=>

<img height="26" width="80" alt="LOGIN" src="/images/skin/login.png" onmouseover="switchImageIdOver(this,'../images/skin/loginhover.png');" onmouseout="switchImageIdOut(this,'/images/skin/login.png'); />

function switchImageIdOver(elem, imgPath) {
elem.src = imgPath;
}
function switchImageIdOut(elem, imgPath) {
elem.src = imgPath;
} 

.facebookicon img {
    background: #fff;
    transition:  background 400ms ease-out;
}

.facebookicon img:hover {
    background: #3CC;
    transition:  background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */