Html 导航css后面的框

因此，我的项目中有一个导航栏，当你将鼠标悬停在上面时，文本的颜色会发生变化

HTML:

我想知道的是，当你将鼠标悬停在一个框上时，如何添加一个框来改变后面的颜色（编辑：并跨越导航的高度）。我能找到的最好的例子是

---

我认为，使用这两种风格的类就可以了。查看它。

您必须控制元素大小。你可以用它来耍把戏

// apply hover to li instead a
.header-nav ul li:hover {
    color: #3e3e3e;
    background-color: red;
}

// remove the margins for the ul
.header-nav ul {
    margin-top: 0px;
    margin-bottom: 0px;
}

// implement the margins of the ul on li but as padding instead of margin
.header-nav ul li {
    padding-top: 10px;
    padding-bottom: 10px;
}

---

参见示例

您遗漏的几件事：

• 清除浮子
• 从ul移除导致意外尺寸的边缘、底部
• 向链接锚点添加填充

CSS:：

* {
    padding=0;
    margin=0;
}
.container {
    margin: 0 auto;
    width: 940px;
}
.header-main {
    border-bottom: 1px solid #dadada;
    padding: 20px 0;
}
.header-nav {
    padding: 0 0;
}
.header-nav ul {
    list-style: none;
    margin:0;
    padding:0;
}
.header-nav ul li {
    float: left;
    margin-right: 20px;
}
.header-nav ul li a {
    color: #737373;
    text-decoration: none;
    font-size: 18px;
    font-family:'Novecentosanswide-DemiBold';
    text-transform: uppercase;
    padding:5px 10px;
}
.header-nav ul li a.active {
    color: #2ecc71;
    background-color:#BFBFBF;
}
.header-nav ul li a:hover {
    color: #3e3e3e;
    background-color:#BFBFBF;
}
.header-nav ul:after {
    clear:both;
    content:"";
    display:block;
}

---

演示：

1。设置块元素的链接

2.在链接中添加填充（而不是列表项）

3.设置链接的背景色

.header-nav ul li a.active {
    background-color: #2ecc71;
}

.header-nav ul li a:hover {
    background-color: #3e3e3e;
}

4.清除

ul

.header-nav ul:after {
    clear: both;
    content: "";
    display: table;
}

5.

6.利润

如果没有列表上的空白，它可能看起来更漂亮

---

（我刚刚注意到您的小提琴的CSS中有一个错误。您将

margin=0

设置为

*

，但指示符应该是冒号而不是等号，如下所示：

margin:0

）

？同时在：悬停中设置背景色。或者这不是你的问题？我试过了，但它没有跨越导航的高度。我将编辑这个inNote，它不适用于基于鼠标的设备（想想残疾人），这是个坏主意。以标签导航为例。您不会看到悬停效果，因为默认情况下列表项不可选择。链接是。我认为这是最好的。此外，对

边距=0

错误的捕捉也很好。没有注意到that@hydrobane如果这有帮助，请接受和/或投票支持此答案。谢谢

* {
    padding=0;
    margin=0;
}
.container {
    margin: 0 auto;
    width: 940px;
}
.header-main {
    border-bottom: 1px solid #dadada;
    padding: 20px 0;
}
.header-nav {
    padding: 0 0;
}
.header-nav ul {
    list-style: none;
    margin:0;
    padding:0;
}
.header-nav ul li {
    float: left;
    margin-right: 20px;
}
.header-nav ul li a {
    color: #737373;
    text-decoration: none;
    font-size: 18px;
    font-family:'Novecentosanswide-DemiBold';
    text-transform: uppercase;
    padding:5px 10px;
}
.header-nav ul li a.active {
    color: #2ecc71;
    background-color:#BFBFBF;
}
.header-nav ul li a:hover {
    color: #3e3e3e;
    background-color:#BFBFBF;
}
.header-nav ul:after {
    clear:both;
    content:"";
    display:block;
}

.header-nav ul li a {
    color: #737373;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Novecentosanswide-DemiBold';
    text-transform: uppercase;
    display: block;
    padding: 4px 8px;
}

.header-nav ul li a.active {
    background-color: #2ecc71;
}

.header-nav ul li a:hover {
    background-color: #3e3e3e;
}

.header-nav ul:after {
    clear: both;
    content: "";
    display: table;
}