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

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

的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')
    });
});

非常感谢！

最佳答案

不需要Javascript，您可以为此简单地使用CSS：

您可以简单地尝试为nav> a> hover添加css样式，如下所示：

.nav a:hover {
    color: maroon;
}

https://jsfiddle.net/Lv3tv5no/