html - 悬停在CSS中不起作用

Question

我来这里是想问一个我知道很简单的问题，但我就是做不到。我想在用户将鼠标悬停在 li 标签上时将其背景颜色更改为其他颜色。

HTML:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS:

nav {
    background-color: #333;
    margin: 0;
    overflow: hidden;
    width: 100%;

    text-align: right;
}

nav ul {
    margin: 0;
    padding: 0;
}
nav ul li {
    display: inline-block;
    list-style-type: none;
}

nav ul li a {
    color: #aaa;
    background-color: #333;
    display: block;
    line-height: 2em;
    padding: 0.5em 0.5em;
    text-decoration: none;
}

nav ul li:hover {
    background-color: #666;
    color: #000;
}

任何帮助将不胜感激，谢谢!

Answer 1

在悬停上添加一个 a 就可以了

nav {
    background-color: #333;
    margin: 0;
    overflow: hidden;
    width: 100%;

    text-align: right;
}

nav ul {
    margin: 0;
    padding: 0;
}
nav ul li {
    display: inline-block;
    list-style-type: none;
}

nav ul li a {
    color: #aaa;
    background-color: #333;
    display: block;
    line-height: 2em;
    padding: 0.5em 0.5em;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #666;
    color: #000;
}

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>