导航栏 - LI:HOVER 全高

Question

所以我想要一个导航栏，当我将鼠标悬停在 li / a 元素上时，导航栏的全高会显示不同的颜色。因为当我将鼠标悬停在它上面时，只有文本的背景颜色发生变化...这非常难看...

我希望这已经够清楚了，但是系统阻止我上传图片:o。

谢谢！

编辑：我忘记了 HTML 和 CSS:

    <ul id="nav">
            <li><a href="">Home</a></li>
            <li><a href="">Courses</a></li>
            <li><a href="">Subjects</a></li>
            <li><a href="">Sign Up</a></li>
            <li><a href="">Log In</a></li>
        </ul>

    #nav {
    height: 60px;
    font-size: 30px;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
    background-color: #0080FF;
    width: auto;
    border: 10px solid #16044E;
    border-radius: 20px;
    z-index: 1;
}

#nav ul {
}

#nav li {
    display: inline;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

#nav li:hover {
    background-color: orange;
}

#nav a, a:active {
    color: white;
    text-decoration: none;
}

Answer 1

这是一个简单的解决方案，可以更改悬停时的背景颜色。

ul li a:hover {
background-color: blue;

}

Answer 2

添加：height: 100%;

收件人：#nav li {

应该这样做！

Answer 3

背景颜色仅应用于文本背景，因为您使用的是 display: inline;

给予内联元素的任何背景都将仅应用于其内容，这与应用于整个元素的块元素不同。

最简单的解决方案是将显示更改为 inline-block，如下所示：

#nav li
{
 display: inline-block;
}

JSBin

Answer 4

将 display:inline-block 添加到 a 并给它一个等于 nav 的高度。我建议这样做，因为在 li 上设置高度会使文本成为 link.Setting 它在 a 上会使整个高度 link

 #nav {
    height: 60px;
    font-size: 30px;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
    background-color: #0080FF;
    width: auto;
    border: 10px solid #16044E;
    border-radius: 20px;
    z-index: 1;
}

#nav ul {
}

#nav li {
    display: inline;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

#nav li:hover a{
    background-color: orange;
}

#nav a, a:active {
    display:inline-block;
    height:60px;
    color: white;
    text-decoration: none;
}

 <ul id="nav">
            <li><a href="">Home</a></li>
            <li><a href="">Courses</a></li>
            <li><a href="">Subjects</a></li>
            <li><a href="">Sign Up</a></li>
            <li><a href="">Log In</a></li>
        </ul>

Answer 5

您需要在列表项上设置 display: inline-block。否则这些项目将表现得像文本元素（这就是 display: inline 所做的）并且不能在 line-height.

之外有任何其他高度

看到这个pen

导航栏 - LI:HOVER 全高

Navigation Bar - LI:HOVER Full Height

html

css

nav

navigationbar