0

我正在开发一个菜单栏。我完成了，但离开了悬停动作。我正在寻找要更改的菜单的整个背景，但菜单背景仅在文本后面更改。

这是小提琴。

<div class="nav">
    <ul>
        <li ><a href="#">Zardari</a></li>
        <li><a href="#">Kutta</a></li>
    </ul>
</div>​

这是CSS，

.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px;   padding-left:10px;}

.nav a{
    color:#fff;text-decoration:none;
    font-style:italic;
    margin-right:10px;
}

    .nav i{position:relative;top:-3px}
    .nav li{float:left;overflow:hidden}
    .nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
    .nav .active{background:#454545}
    .nav ul a:hover{
            color:#FFF;
            background:#000;            

    }
​

提前致谢。

4

3 回答 3

2

将您的标签padding:10px放在a标签上，而不是.nav. 这样，您将让整个链接区域从上到下更改颜色。（你也必须添加display: block;到你a的。

.nav a{
  color:#fff;
  text-decoration:none;
  font-style:italic;
  margin-right:10px;
  padding:10px;
  display: block;
}

小提琴

于 2012-12-28T15:37:59.907 回答
1

我想我通过使用 Jquery 实现了你想要的。我编辑了 css 以消除您在 Jquery 中实现的更改背景的尝试。

CSS:

.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px;   padding-left:10px;}

.nav a{
    color:#fff;text-decoration:none;
    font-style:italic;
    margin-right:10px;
}

    .nav i{position:relative;top:-3px}
    .nav li{float:left;overflow:hidden}
    .nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
    .nav .item{display:block;font-family:Oswald,Arial Narrow,Arial,Helvetica,sans-serif;font-size:15.6px;line-height:1;padding:5px 8px;text-transform:uppercase}​

然后在head你的 html 文件中包含 Jquery 库。您可以下载它并将其托管在您的服务器上或使用 Google 的 CDN 作为库，如下所示：

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

现在在您的 HTML 中body添加我为您编写的 jquery 函数：

$("li").mouseover(function () {
    $(".nav").css("background-color","#000");
});

$("li").mouseout(function () {
    $(".nav").css("background-color","#454545");
});

当鼠标悬停在li（每个按钮）上时，导航栏的背景会发生变化。如果这是你想要的，没关系，否则如果你想要不同的东西，请告诉我，我会改变它。

在这里你可以找到关于jsfiddle的 DEMO

于 2012-12-28T15:51:56.863 回答
0

那这个呢？

.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px;   padding-left:10px;}

.nav a{
color:#fff;text-decoration:none;
font-style:italic;
margin-right:10px;
} 

.nav i{position:relative;top:-3px}
.nav li{float:left;overflow:hidden}
.nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
.nav .item{display:block;font-family:Oswald,Arial Narrow,Arial,Helvetica,sans-serif;font-size:15.6px;line-height:1;padding:5px 8px;text-transform:uppercase}
.nav .item:hover{background:#454545;color:#FFF}
.nav .active{background:#454545}
.nav:hover{
        color:#FFF;
        background:#000;            

}

​</p>

于 2012-12-28T15:28:53.327 回答