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

Change color of the text in navigation bar when hover

本文关键字：中文 文本 颜色 导航 悬停      更新时间：2023-09-26

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

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

您可以简单地尝试为导航>>悬停添加 css 样式，如下所示：

.nav a:hover {
    color: maroon;    
}

https://jsfiddle.net/Lv3tv5no/

使用类给出以下方式。

因为首先你在元素上赋予了颜色，然后你正在尝试使用类添加颜色。因此，它不会替换元素的颜色。

而不是它使用类到锚标签给出颜色。 就像这里使用.black类一样。

$(document).ready(function() {
      $('.nav').hover(function() {
            $('a').addClass('add')
      }, function() {
            $('a').removeClass('add')
      });
});
.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;
}
<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>

注意：不需要JQuery来改变颜色，你只能使用css :hover来改变。

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

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

你的小提琴。

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

快速解决方案：

CSS选择器赋予了你执行此操作的能力。不需要Javascript/JQuery。

.nav:hover {
    color:maroon;
}

解释：

上面的代码可以分为两部分：

  • 第一个是CSS选择器：它选择所有具有nav类的元素，而它们被用户悬停在上面。
  • 第二个是括号内的区域。您可以在此处更改元素的任何属性，当
    • 悬停时，它们将更改，当悬停时，它们将更改回来。

CSS 选择器：

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

  • .nav:hover选择悬停的所有nav元素。
    • .nav a:hover在悬
  • 停时选择具有nav类的元素中的<a>标记。
    • .a:hover 在悬
  • 停时选择所有<a>标签。
    • .nav:hover a 在具有
  • 类nav的元素中<a>选择该元素悬停时的所有标记。

还要尝试:active正在单击/遇到鼠标按下事件的元素。

您应该使用 !important 来覆盖类add a的颜色。

.add {
     color: maroon !important;
}

顺便说一句，您可以仅使用css来做到这一点，如下所示。

.nav:hover a {
    color: maroon;
}
相关文章：