CSS - 图像和悬停不能正常工作

我在页面上有图像，当我将图像悬停时，图像应显示不同的颜色。悬停本身有效，但原始图像位于悬停图像的顶部。我曾尝试设置z-index，但无法正常工作。CSS - 图像和悬停不能正常工作

这里是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; 
}

感谢任何帮助和建议！

来源

2011-07-10 L84

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

而不是'重新发明轮子'，并写下如何做到这里看看http://sixrevisions.com/css/css-sprites-site-speed/或只是谷歌'CSS Sprites'。

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

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

干杯，马修

来源

2011-07-10 07:01:53

这也将解决您的对齐问题。 –

谢谢我将与精灵合作，看看我得到了什么=> – L84

感谢您的建议和帮助。我把它当作精灵来工作。谢谢！ – L84

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

做这个

删除图像

添加这个CSS来#login

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

最好是有（精灵）在同一图像上两个图像，只是更改悬停时的背景位置。这消除了第一次悬停时图像加载时闪烁。看到马修对此的另一个答案。

来源

2011-07-10 07:07:00 jwinn

谢谢，我会给精灵一个尝试=> – L84

感谢您提供的信息我工作=> – L84

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

来源

2011-07-10 07:12:43 kleinohad

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

我想出了一个快速简单的方法来获得相同的效果（图像淡入淡出）唯一的缺点是你需要一个tr答案是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 */

让我知道如果你喜欢它。

来源

2012-07-17 20:02:11 matt

CSS - 图像和悬停不能正常工作

回答

相关问题