导航栏 - LI:HOVER 全高答案

【问题标题】：Navigation Bar - LI:HOVER Full Height导航栏 - LI:HOVER 全高
【发布时间】：2015-04-26 08:23:38
【问题描述】：

所以我想要一个导航栏，当我将鼠标悬停在 li / a 元素上时，导航栏的 FULL 高度会出现不同的颜色。因为当我将鼠标悬停在它上面时，只有文本的背景颜色会改变......这很丑......

我希望这足够清楚，但系统阻止我上传图片：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;
}

【问题讨论】：

你能上传一个代码sn-p吗？（即：JS Fiddle）
@AramilRey jsfiddle.net/g6eh4kro
您是否正在寻找类似jsfiddle.net/akshay7/grjdp7qw 的东西？

标签： html css nav navigationbar

【解决方案1】：

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

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

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

#nav li
{
 display: inline-block;
}

JSBin

【讨论】：

我不得不等 7 分钟 ^.^

【解决方案2】：

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

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

}

【讨论】：

【解决方案3】：

地址：height: 100%;

收件人：#nav li {

应该这样做！

【讨论】：

糟糕，@Anakin 已经解决了它，因为我将显示更改为 inline-block，所以它对我的小提琴有效！

【解决方案4】：

将display:inline-block 添加到a 并赋予它等于nav 的高度。我建议这样做，因为在 li 上设置高度将使文本成为链接。在 a 上设置它将使整个高度链接

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

【讨论】：

【解决方案5】：

您需要在列表项上设置display: inline-block。否则，这些项目将表现得像文本元素（这就是 display: inline 所做的）并且在 line-height 之外不能有任何其他高度。

看到这个pen

【讨论】：