0

我在尝试为我的精灵导航实现 CSS 部分以在悬停时从我的精灵带来“悬停”效果时遇到问题。如果我显示代码更容易解​​释。

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 “浏览器导航”

那么我该如何让它在悬停时将图像向下移动一个完整的缺口？

帮助非常感谢提前！

4

3 回答 3

2

Here goes your working 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;
}
于 2013-04-20T20:57:55.007 回答
1

Try:

#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 classes always use the tags eg.: li.class{} Try to keep the selectors trading at the same level:

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

In background-position use px negative and positive.

Note-OFF: I recommend that if you have trouble making your css wheels in various browsers, you try to use CSS RESET:

*{ margin:0; padding:0; list-style-type:none; }

于 2013-04-20T20:44:47.177 回答
1

如果您在使用 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
}

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

于 2013-04-20T20:48:59.523 回答