2

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

如果你请检查下面的css和html，你会明白我需要什么。我希望在“each_option”div 鼠标悬停时更改“search_forums”（跨度）图标。

提前致谢

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>

雪碧图标 雪碧图标图像

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

这是我想做的：http: //jsfiddle.net/stckhlm/EXZKa/

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

4

2 回答 2

1

这就是你所追求的对吗？

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

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

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

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

.each-option:hover {
Your styling here

}

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

希望这可以帮助！

于 2012-08-31T23:55:06.097 回答
0 
.each_option:hover .search_forums{//enter your hover changes here.}

不是 100% 确定我是否理解您的目标 - 但如果您希望在每个选项悬停时更改 search_forums 样式，上面的代码应该可以解决问题。

于 2012-08-31T22:52:42.943 回答