Question

我有这个水平菜单。菜单看起来像标签，高29px。 CSS中的图像设置为<li>背景图像。我也在CSS中设置了悬停。现在我想要的是当我们用鼠标移动时图像向上移动8px。现在它向下移动。

CODE：

#nav li {
    float:left;
    list-style:none;
    width:116px;
    height:29px;
    background-image:url(images/nav/nav_btn.png);
    background-repeat:no-repeat;
    padding-right:10px;
    text-align:center;
    padding-top:8px;}

#nav li:hover {
    float:left;
    list-style:none;
    width:116px;
    height:37px;
    background-image:url(images/nav/nav_btn_active.png);
    background-repeat:no-repeat;
    padding-right:10px;
    text-align:center;
    padding-top:8px;
    padding-bottom:-8px;}

<div id="nav">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>

Answer 1

在li:hover

上反转您的填充

padding-top:-8px;
padding-bottom:8px;

编辑：不！当然，当我说上述内容时，我不知道我的大脑在哪里。没有负面padding这样的东西。我想这就是你想要的：

#nav li:hover {
    float:left;
    list-style:none;
    width:116px;
    height:37px;
    background-image:url(images/nav/nav_btn_active.png);
    background-repeat:no-repeat;
    padding-right:10px;
    text-align:center;
    padding-top:8px;
    padding-bottom:0px;
    position: relative;
    top: -8px;
}

Answer 2

我可以建议摆脱padding-top和-bottom，然后使用background-position代替？此外，您实际上不需要在#nav li:hover下添加#nav li规则，因为规则是级联的。

导航背景按钮向上悬停

2 个答案: