如何在CSS精灵图像上做悬停效果？

我正在使用一个精灵图像。对于悬停效果，精灵上的每个图标都具有相同但不同的颜色。那么当我将鼠标悬停在图标上时，悬停效果就起作用了。但我想获得悬停（更改图像）div的鼠标悬停，而不是跨度。（因为跨度宽度指定为图标大小，我找不到解决方案）如何在CSS精灵图像上做悬停效果？

如果您请检查以下css和html，您将了解我需要什么。我想让“search_forums”（span）图标在“each_option”div mouseover上更改。

在此先感谢

CSS

.each_option{ 
height:30px; 
border-bottom:1px solid #ffe869; 
font-size:14px; 
padding-top:9px; 
color:#707070;} 

.forumdisplay_sprite{ 
background-image:url(../img/forumdisplay_sprite.png); 
background-repeat:no-repeat; 
display:block; 
text-indent:-99999px; 
overflow:hidden;} 

.search_forums{height:24px;width:24px;background-position:-24px -48px;} 

.search_forums:hover{height:24px;width:24px;background-position:-24px -72px;}

HTML

<div class="each_option"> 
<span class="forumdisplay_sprite search_forums"></span> 
<a href="#">Search Forums</a> 
</div>

雪碧图标 Sprite icons image

对不起，不够清楚。我原来的/以前的风格就像下面给出的页面一样。然后在阅读关于更好的CSS和优化的文章后，我决定使用精灵图像。但我有这个问题...

这里是我想怎样做：http://jsfiddle.net/stckhlm/EXZKa/

是否有可能得到悬停（改变包装div的背景颜色和内部div的背景图像同时进行）像效果上面的例子？如果没有，那么我将不得不停止使用精灵图片或悬停效果...

来源

2012-08-31 Seamus

.each_option:hover .search_forums{//enter your hover changes here.}

不是100％肯定，如果我理解你以后在做什么 - 但上面的代码应该做的伎俩如果您希望在each_option悬停时更改search_forums样式。

来源

2012-08-31 22:52:42

这就是你所追求的权利？

http://jsfiddle.net/j4nf4/1/

不确定为什么你提供不呈现图像，从而发现了另一个精灵。

为什么你想要一个跨度在锚？对我来说这没有意义。

如果你想在DIV悬停效果的CSS应该是你的情况：

.each-option:hover { 
Your styling here

}

确保，如果你设置的div，跨度，段落等的悬停状态，你将光标更改为指针：cursor: pointer;，以便用户知道该区域是可点击的。

希望这会有所帮助！

来源

2012-08-31 23:55:06 Filth

如何在CSS精灵图像上做悬停效果？

回答

相关问题