1
votes

changement de couleur des liens de la barre de navigation bootstrap au survol

J'ai une barre de navigation Bootstrap, je souhaite changer la couleur des liens dans la barre de navigation, au survol. J'ai essayé CSS pour cela mais cela ne fonctionne pas. Je ne veux pas changer le code, mais dans les mêmes classes de balises, je veux ajouter l'effet. Certaines personnes utilisent des listes pour la barre de navigation, je ne veux pas le faire.

J'ai essayé d'ajouter du CSS pour la même chose pour le survol avec la classe définie dans chaque balise.

<!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>

Je souhaite avoir une couleur verte sur les services lorsque je passe la souris dessus.

html css bootstrap-4

0 commentaires

6 Réponses :

0
votes

Ajouter ci-dessous CSS pour ajouter le survol à la navigation et ajouter après bootstrap CSS dans l'en-tête

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

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

0 commentaires

0
votes

utilisez hover pour le lien de service, cela fonctionnera

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

.services-link:hover{
color:#00ff00 !important;
}

0 commentaires

0
votes

si vous le souhaitez spécifiquement sur le service, ajoutez un identifiant aux services Services

puis dans votre fichier css ajoutez ceci

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

2 commentaires

J'ai déjà essayé ceci, et j'ai essayé à nouveau cela n'a pas fonctionné.

Cela pourrait être dû au fait que sous .nav-item: hover, vous avez un! Important placé sur votre déclaration de couleur rouge qui remplace le code. Sinon, vérifiez la hiérarchie de la façon dont votre css est déclaré pour vous assurer que tout est placé dans le bon ordre.

1
votes

<!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>

.services-link strong:hover {
  color: green;
}

0 commentaires

1
votes

Voici votre solution

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

.navbar-nav .services-link:hover{
color: #7FFF00 !important; /* your color */
}

0 commentaires

0
votes

<!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>

1 commentaires

Votre code est totalement différent monsieur, il ne fonctionne pas selon les besoins