Question

我正在使用精灵图片。精灵上的每个图标都有相同但不同的颜色用于悬停效果。好吧，当我鼠标悬停在图标上时，悬停效果正常。但我想在div鼠标悬停而不是跨度上悬停（更改图像）。（因为跨度宽度指定为图标大小，我无法找到解决方案）

如果你请查看下面的css和html，你就会明白我的需要。我想在“each_option”div mouseover上更改“search_forums”（span）图标。

提前致谢

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图标 Sprite icons image

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

以下是我想做的事：http://jsfiddle.net/stckhlm/EXZKa/

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

Answer 1

这就是你追求的权利吗？

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

不确定为什么你提供的图像没有渲染，所以发现了另一个精灵。

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

如果你想要一个on div悬停效果，CSS应该在你的情况下：

.each-option:hover {
Your styling here

}

如果要为div，spans，paragraph等设置悬停状态，请将光标更改为指针：cursor: pointer;，以便用户知道该区域/区域是可点击的。

希望这有帮助！

Answer 2

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

不是100％确定我是否理解了你所追求的内容 - 但如果你想在each_option被徘徊时改变search_forums样式，那么上面的代码应该可以解决问题。

如何在css sprite图像上悬停效果？

2 个答案: