javascript - 悬停时更改导航栏中文本的颜色

Question

我希望导航栏的文本在悬停时改变颜色。我的代码有什么问题？

HTML

<div class="nav">
    <ul class="pull-left">
        <li><a href="#">Ride</a></li>
        <li><a href="#">Drive</a></li>
    </ul>
    <ul class="pull-right">
        <li><a href="#">find a city</a></li>
        <li><a href="#">help</a></li>
        <li><a href="#">sign in</a></li>
    </ul>
</div>

CSS:对于 css 部分，我不确定何时选择“a”或何时选择“li”

.nav a {
    padding: 14px 10px;
    text-transform: uppercase;
    font-family: Avenir;
    font-size: 14px;
    font-weight: bold;
    color: black;
    text-decoration: none;
}

.nav li {
    display: inline;
}

.nav {
    padding-top: 30px;
    padding-right: 30px;
}

.add {
    color: maroon;    
}

JS

$(document).ready(function() {
    $('.nav').hover(function() {
        $('a').addClass('add')
    }, function() {
        $('a').removeClass('add')
    });
});

非常感谢!

Answer 1

无需 Javascript，您只需使用 CSS 即可:

您可以简单地尝试为导航添加一个 css 样式> a>像这样悬停:

.nav a:hover {
    color: maroon;    
}

https://jsfiddle.net/Lv3tv5no/