CSS导航雪碧悬停不起作用

Question

我试图为我的精灵导航实现CSS部分时出现问题，从悬停时我的精灵带来“悬停”效果。更容易解释，如果我展示的代码。

THE CSS：

#nav { 

    width:837px; 
    float:left; 
    margin:0px 0px 0px 30px; 
    background:url(../images/withtext.gif) repeat-x; 
    height:79px; 
    position: relative; 
    top: -45px; 
} 


#nav li { 
margin:0; 
padding:0; 
list-style-type:none; 
display:inline; 
height:79px; 
text-align:center; 
float:left; 
line-height:79px; 
font-family:Georgia, "Times New Roman", Times, serif; 
} 



#nav a { 
display:block; 
height:79px; 
color:#311f11; 
text-decoration:none; 
font-size:13px; 
} 

#nav a:hover { 
background-image:url(withtext.gif); 
color:#fff; 
} 



#nav .snowboard { width:240px; } 
#nav .snowboard a:hover { background-position: 0px bottom; } 

在HTML：

<ul id="nav"> 
    <li class="snowboard"><a href="#">Snowboard</a></li> 
    <li class="briller"><a href="#">Briller</a></li> 
    <li class="ski"><a href="#">Ski</a></li> 
    <li class="stovler"><a href="#">Stovler</a></li> 
    <li class="handlevogn"><a href="#">Handlevogn</a></li> 

</ul> 

导航图像：

[1] http://i.imgur.com/zkVmoEN.gif “导航条与被动和悬停状态”

当前状态导航：

[2] http://i.imgur.com/oZPK8kd.jpg“在浏览器中导航”

那么，我该如何让它在图像上移动一个整个凹槽？

帮助提前感谢！

Answer 1

这里去你的工作solution

#nav ul, #nav li{ 
    margin: 0; 
    padding: 0; 
} 
#nav { 

    width:837px; 
    float:left; 
    margin:0px 0px 0px 30px; 
    background:url(http://i.imgur.com/zkVmoEN.gif) repeat-x; 
    height:79px; 
    position: relative; 
} 

#nav li { 
margin:0; 
padding:0; 
list-style-type:none; 
display:inline; 
height:79px; 
text-align:center; 
float:left; 
line-height:79px; 
font-family:Georgia, "Times New Roman", Times, serif; 
} 

#nav a { 
display:block; 
height:79px; 
color:#311f11; 
text-decoration:none; 
font-size:13px; 
    width:150px; 
    text-indent:-9999px; 
} 
.snowboard a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -40px 80px; 
} 
.briller a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -190px 80px; 
} 
.ski a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -340px 80px; 
} 
.stovler a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -490px 80px; 
} 
.handlevogn a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -640px 80px; 
} 

Answer 2

尝试：

#nav li a { 
display:block; 
height:79px; 
color:#311f11; 
text-decoration:none; 
font-size:13px; 
} 

#nav li a:hover { 
background-image:url(withtext.gif); 
color:#fff; 
} 



#nav li.snowboard { width:240px; } 
#nav li.snowboard a:hover { background-position: 0px -79px; }/*Here change as needed.*/ 

CSS类始终使用标签如：li.class{} 尽量保持选择在同一水平交易：

foo foo2 foo2 a{} 
foo foo2 foo2 a:hover{} 

在背景位置使用PX负，正。

音符关：我建议，如果你有麻烦让你的CSS轮 在不同的浏览器，您尝试使用CSS RESET：

* { 保证金：0; 填充：0; list-style-type：none; }

Answer 3

如果您在使用CSS时遇到问题，可能是因为您只是在文本中添加了悬停效果。顺便说一句，您无法将文字悬停在您想要的位置并获得背景图片。如果你愿意，你可以试试这个：

CSS：

#nav{background:url(../images/withtext.gif) 
    repeat-x; 
    height:100px; 
    width:100%; 
    } 
li { 
background-color: #??????; 
} 
li a { 
color: black; 
} 
li:hover { 
background-color: #something_different; 
} 
li a:hover { 
color:#something_different; 
} 

或者，如果你想有李班各有不同，你可能只是这样做：

.snowboard li:hover { 
Some code... 
} 

.snowboard li a:hover { 
some code 
} 

如果你的布局就是这样，你基本上可以做任何事情。