Question

我在尝试为我的精灵导航实现CSS部分时遇到问题，带来了＆＃34; hover＆＃34;我的精灵对悬停的影响。如果我显示代码，则更容易解释。

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＆＃34;具有被动和悬停状态的导航栏＆＃34;

目前的导航状态：

[2] http://i.imgur.com/oZPK8kd.jpg＆＃34;在浏览器中导航＆＃34;

那么如何才能使它在悬停时向下移动整个图像？

提前帮助非常感谢！

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;     列表样式类型：无;   }

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;
}

或者，如果你想让li课程各不相同，你可以这样做：

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

.snowboard li a:hover {
some code
}

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

CSS导航精灵悬停不起作用

3 个答案: