导航栏 - 鼠标悬停全高

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

- Coder

---

你能上传一段代码片段吗？（例如：JS Fiddle） - Aramil Rey

@AramilRey https://jsfiddle.net/g6eh4kro/ - Coder

你是否在寻找类似于这个 http://jsfiddle.net/akshay7/grjdp7qw/ 的东西？ - Akshay

Answer 1

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

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

}

- Musadiq Khan

Answer 2

背景色只应用于文本背景，因为您正在使用display: inline;

任何应用于内联元素的背景都只会应用于其内容，这与应用于整个元素的块级元素不同。

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

#nav li
{
 display: inline-block;
}

JSBin

{{链接1：JSBin}}

- Anakin

---

我不得不等待7分钟 ^.^ - Coder

Answer 3

添加： height: 100%; 至：#nav li { 应该可以了！

- Aramil Rey

---

糟糕，@Anakin已经解决了这个问题，它在我的fiddle上运行正常，因为我将显示方式更改为inline-block！ - Aramil Rey

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

- Akshay

Answer 5

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

请参见此pen。

- Valentin