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精灵。我相信它们是实现你想要的更有效的方法。

而不是'重新发明轮子'并在此处写下如何操作，看看http://sixrevisions.com/css/css-sprites-site-speed/或只是google'CSS Sprites'。

它们会减少HTTP请求，从而减少网站使用的带宽量。

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

干杯，马修

Answer 2

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

这样做

删除图片

将此CSS添加到＃login

background: url("../images/skin/login.png") top left no-repeat;
display: block;
height: 26px;
width: 80px;

最好将两个图像放在同一个图像上（一个精灵），然后在悬停时更改背景位置。这消除了首次悬停时图像加载时的闪烁。请参阅Matthew关于此的其他答案。

Answer 3

删除悬停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;
}

Answer 4

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

我提出了一种快速简便的方法来获得相同的效果（图像淡入淡出）唯一的缺点是你需要一个透明的PNG，但是很多按钮或社交媒体图标效果很好。

HTML：

<div class="facebookicon">
    <a href="#!"><img src="http://example.com/some.png"></a>
</div>

CSS：

.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 */

如果你喜欢，请告诉我。

CSS - 图像和悬停不正常

4 个答案: