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部分，我不知道何时选择＆＃39; a＆＃39;或何时选择＆＃39; li＆＃39;

.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：

您可以尝试为nav＆gt;添加css样式。 a＆gt;像这样悬停：

.nav a:hover {
    color: maroon;    
}

https://jsfiddle.net/Lv3tv5no/

Answer 2

您应该使用!important覆盖a课程中add的颜色。

.add {
     color: maroon !important;
}

顺便说一句你可以只使用css这样做。

.nav:hover a {
    color: maroon;
}

Answer 3

使用类提供以下方式。

因为首先你在元素上给出了颜色，然后你尝试使用类添加颜色。所以，它不会取代元素的颜色。

而不是使用类来锚定标记。就像在这里使用.black类。

＆＃13;

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

＆＃13;

.nav a {
      padding: 14px 10px;
      text-transform: uppercase;
      font-family: Avenir;
      font-size: 14px;
      font-weight: bold;
     
      text-decoration: none;
}

.black{
   color: black;
}

.nav li {
      display: inline;
}

.nav {
      padding-top: 30px;
      padding-right: 30px;
}

.add {
      color: maroon;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
      <ul class="pull-left">
            <li><a class="black" href="#">Ride</a></li>
            <li><a class="black" href="#">Drive</a></li>
     </ul>
     <ul class="pull-right">
           <li><a class="black" href="#">find a city</a></li>
           <li><a class="black" href="#">help</a></li>
           <li><a class="black" href="#">sign in</a></li>
     </ul>

＆＃13;

注意：没有必要使用JQuery来改变颜色，只能使用css。在 :hover

上使用

Answer 4

如果你真的坚持使用Jquery来悬停你的菜单，那么你的JS代码应该是这样的：

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

fiddle.

注意：我在!important中使用了.add，因为color: #000;已经在.nav a设置了您的菜单。

Answer 5

快速解决方案：

CSS选择器使您有能力执行此操作。没有Javascript / JQuery。

.nav:hover {
    color:maroon;
}

阐释：

上述代码可分为两部分：

第一个是CSS选择器：它选择类nav的所有元素，而用户正在悬停它们。
第二个是括号内的区域。您可以在此更改元素的任何属性，它们会在悬停时更改，并在不是时更改。

CSS选择器：

此外，这里是一些选择器的定义，只是为了消除混淆：

.nav:hover选择所有悬停的nav元素。
.nav a:hover会在<a>等级的元素中选择nav个标签。{/ li>
.a:hover会在悬停时选择所有<a>个标记。
.nav:hover a会选择类别为<a>的元素中的所有nav标记，而该元素已悬停。

另请尝试:active查看正在点击/体验mousedown事件的元素。

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

5 个答案:

快速解决方案：

阐释：

CSS选择器：