Question

我正在开发一个菜单栏。我完成了，但留下了悬停动作。我正在寻找要更改的菜单的整个背景，但菜单背景只会在文本后面发生变化。

Here是小提琴。

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

    }

提前致谢。

Answer 1

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

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

Fiddle

Answer 2

我认为我通过使用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}

然后在你的html文件的head中包含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

Answer 3

这个怎么样？

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

}

菜单背景不完全改变

3 个答案: