悬停时更改引导导航栏链接的颜色

【问题标题】：changing color of bootstrap navbar links on hover悬停时更改引导导航栏链接的颜色
【发布时间】：2022-02-02 21:06:26
【问题描述】：

我有一个引导导航栏，我想在悬停时更改导航栏中链接的颜色。我已经尝试过CSS，但它不起作用。 我不想更改代码，但在相同的标记类中我想添加效果。有些人使用列表作为导航栏，我不想这样做。

我尝试为悬停添加相同的 CSS，并在每个标签中定义类。

<!doctype html>
        <html>
        <head>
        <title>Contact Us</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
            <link href="contact.css" type="text/css">
        </head>
        
        <body>
        <div class="container-fullwidth">
              <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
                <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                    <div class="collapse navbar-collapse" id="NewMenu">
                        <div class="navbar-nav">
                            <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a>
                            <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a>
                            <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>
                        </div>
                    </div>
                </nav>
            </div>
        </body>
        </html>

当我将鼠标悬停在服务上时，我希望它具有绿色。

【问题讨论】：

    标签： html css bootstrap-4


    【解决方案1】： 

    .services-link strong:hover {
  color: green;
}
    <!doctype html>
<html>

<head>
  <title>Contact Us</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link href="contact.css" type="text/css">
</head>

<body>
  <div class="container-fullwidth">
    <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
      <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
      <div class="collapse navbar-collapse" id="NewMenu">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a>
          <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a>
          <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>
        </div>
      </div>
    </nav>
  </div>
</body>

</html>

    【讨论】：

      【解决方案2】：

      这是您的解决方案

      .navbar-nav .services-link:hover{
color: #7FFF00 !important; /* your color */
}
      <html>
    <head>
    <title>Contact Us</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <link href="contact.css" type="text/css">
    </head>

    <body>
    <div class="container-fullwidth">
          <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
            <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">
                <span class="navbar-toggler-icon"></span>
            </button>
                <div class="collapse navbar-collapse" id="NewMenu">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a>
                        <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a>
                        <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>
                    </div>
                </div>
            </nav>
        </div>
    </body>
    </html>

      【讨论】：

        【解决方案3】：

        使用hover作为服务链接它将起作用

        .services-link:hover{
color:#00ff00 !important;
}
        <html>
    <head>
    <title>Contact Us</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <link href="contact.css" type="text/css">
    </head>

    <body>
    <div class="container-fullwidth">
          <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
            <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">
                <span class="navbar-toggler-icon"></span>
            </button>
                <div class="collapse navbar-collapse" id="NewMenu">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a>
                        <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a>
                        <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>
                    </div>
                </div>
            </nav>
        </div>
    </body>
    </html>

        【讨论】：

          【解决方案4】：

          如果您希望它专门用于服务，请在服务中添加一个 id &lt;a class="nav-item nav-link services-link" id="services-link" href="#"&gt;&lt;strong&gt;Services&lt;/strong&gt;&lt;/a&gt;

          然后在你的css文件中添加这个

          #services-link:hover {
color: green;
}

          【讨论】：

          • 这个我已经试过了，再试一次还是不行。
          • 这可能是因为在 .nav-item:hover 下你有一个 !important 放置在覆盖代码的红色声明上。如果没有，请检查您的 CSS 声明的层次结构，以确保所有内容都按正确的顺序放置。
          【解决方案5】： 
          <!doctype html>
<html>

<head>

    <title>Contact Us</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <link href="contact.css" type="text/css">

    <style>
        .nav-item:hover {
            color: red !important;
            background: yellow;
        }
    </style>
</head>

<body>
    <div class="container-fullwidth">
        <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
            <h1 class="navbar-brand">
                <strong>Digitian Hub</strong>
            </h1>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu"
                aria-label="toggleNavigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="NewMenu">
                <div class="navbar-nav">
                    <a class="nav-item nav-link" href="Rishabh.html">
                        <strong>Home</strong>
                    </a>
                    <a class="nav-item nav-link services-link" href="#">
                        <strong>Services</strong>
                    </a>
                    <a class="nav-item active nav-link contact-link" href="Contact Us.html">
                        <strong>Contact Us</strong>
                    </a>
                </div>
            </div>
        </nav>
    </div>
</body>

</html>

          【讨论】：

          • 您的代码完全不同，先生，它不能按需要工作
          【解决方案6】：

          这是您的解决方案；

          <!doctype html>
        <html>
        <head>
        <title>Contact Us</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
            <link href="contact.css" type="text/css">
        </head>
        
        <body>
        <div class="container-fullwidth">
              <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
                <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                    <div class="collapse navbar-collapse" id="NewMenu">
                        <div class="navbar-nav">
                            <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a>
                            <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a>
                            <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>
                        </div>
                    </div>
                </nav>
            </div>
            <style>
                .services-link:hover{
                    color: green !important;
                }
            </style>
        </body>
        </html>

          【讨论】：

            【解决方案7】：

            在 CSS 下方添加用于向导航添加悬停并在 bootstrap CSS 之后添加在标题中

            .navbar-dark .navbar-nav .nav-link.services-link:hover {
  color: rgba(0,255,0,1);
}


            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="contact.css" type="text/css">
<style type="text/css">
  .navbar-dark .navbar-nav .nav-link.services-link:hover {
    color: rgba(0,255,0,1);
  }
</style>
        
        <div class="container-fullwidth">
          <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
            <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">
                <span class="navbar-toggler-icon"></span>
            </button>
                <div class="collapse navbar-collapse" id="NewMenu">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a>
                        <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a>
                        <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>
                    </div>
                </div>
            </nav>
        </div>

            【讨论】：

              猜你喜欢
              • 2013-05-13
              • 1970-01-01
              • 2021-03-10
              • 2022-01-08
              • 2018-12-01
              • 1970-01-01
              • 1970-01-01
              • 2015-07-29
              • 2018-08-30
              相关资源
              最近更新 更多
              热门标签
              Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode