bootstrap 5链接悬停颜色不起作用

ddrv8njm  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(2)|浏览(231)

我试图这样做，当你通过鼠标在链接的文本导航栏的颜色变化和边界底部，边界底部工作，但我不明白为什么颜色文本不改变
HTML语言

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
   <title>Savinov Denis</title>
</head>

<body>
   <nav class="navbar navbar-expand-lg fixed-top navbar-custom">
       <div class="container">
           <a class="navbar-brand" href="#">
               <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
           </a>

           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
               aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
           </button>

           <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
               <ul class="navbar-nav justify-content-center">
                   <li class="nav-item">
                       <a class="nav-link" href="#scrollspyHeading1">Home</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#scrollspyHeading2">Services</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#scrollspyHeading3">Compétences</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#scrollspyHeading4">Portfolio</a>
                   </li>

                   <li class="nav-item">
                       <a class="nav-link" href="#scrollspyHeading6">À Propos</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#scrollspyHeading7">Contact</a>
                   </li>
               </ul>
           </div>
       </div>
   </nav>

   <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
       <div class="carousel-inner">
           <div class="carousel-item active">
               <img src="images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg" class="d-block w-100"
                   style="filter: brightness(10%);" alt="...">
               <div class="carousel-caption d-none d-md-block">
                   <h5>SAVINOV Denis</h5>
                   <p>Développeur Web Indépendant</p>
               </div>
           </div>
           <div class="carousel-item">
               <img src="images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg" class="d-block w-100"
                   style="filter: brightness(10%);" alt="...">
               <div class="carousel-caption d-none d-md-block">
                   <h5 class="text-center">Création de sites web</h5>
                   <p class="text-center">Site vitrine, e-commerce, forum et autres</p>
               </div>
           </div>
           <div class="carousel-item">
               <img src="images/10705380.jpg" class="d-block w-100" style="filter: brightness(10%);" alt="...">
               <div class="carousel-caption d-none d-md-block">
                   <h5 class="text-center">Web design, conception graphiques</h5>
                   <p class="text-center">Logos, plaquettes publicitaire, cartes de visites,
                       newsletters</p>
               </div>
           </div>
       </div>
       <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
           <span class="visually-hidden">Previous</span>
       </button>
       <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="visually-hidden">Next</span>
       </button>
   </div>
   <div class="container text-center" href="scrollspyHeading1">
       <h1>MES SERVICES</h1>
       <h3>Des prestations adaptées à vos besoins</h3>
   </div>
   <div class="container text-center" href="scrollspyHeading2">
       <div class="row">
           <div class="col">
               <h5 class="text-end">Gestion de projets web</h5>
               
               <p class="text-end">Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile.</p>
               <h5 class="text-end">Intégration Web</h5>
               <p class="text-end">Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p>
               <h5 class="text-end">Développements spécifiques</h5>
               <p class="text-end">Des outils adaptés à votre coeur de métier,
                   applications & solutions personnalisées.</p>
               <h5 class="text-end">Référencement naturel</h5>
               <p class="text-end">Affichage sémantique des informations,
                   des pages propres pour un référencement optimal.</p>
           </div>
           <div class="col">
               <img src="images/index.jpeg" class="d-block w-100" alt="...">
           </div>
           <div class="col">
               <h5 class="text-start">Conception graphique & Webdesign</h5>
               <p class="text-start">Logos, templates Web, plaquettes publicitaires,
                   cartes de visite, newsletters...</p>
               <h5 class="text-start">Dynamisme des pages</h5>
               <p class="text-start">Des animations de contenu non intrusives
                   pour embellir votre projet.</p>
               <h5 class="text-start">Interface d'administration</h5>
               <p class="text-start">Outils spécifiques au bon fonctionnement
                   de votre entreprise.</p>
               <h5 class="text-start">Responsive design</h5>
               <p class="text-start">Compatible tous supports, tablette & application mobile.</p>
           </div>
       </div>

       <p>Compatible Mobile, Tablettes & P.C</p>
       <h3>Développement Web Responsive</h3>
   </div>

   <div class="container text-center" href="scrollspyHeading3">
       <h1>MES COMPÉTENCES</h1>
       <h3>Des compétences à votre service</h3>
       <div class="container text-center">
           <div class="row">
               <div class="col">
                   <h1 class="text-start">Domaines de compétences</h1>
                   <h4 class="text-start"> Gestion de projets web </h4>
                   <p class="text-start">Site vitrine, corporate, évènementiel, e-commerce, intranet, application
                       mobile.</p>

                   <h4 class="text-start"> Conception graphique & Webdesign </h4>
                   <p class="text-start">Logos, templates Web, plaquettes publicitaires, cartes de visite,
                       newsletters...</p>

                   <h4 class="text-start">Applications spécifiques et Interface d'administration</h4>
                   <p class="text-start">PHP - MySQL - AJAX / ASP.NET - C# - SQL</p>

                   <h4 class="text-start">Mise en place / Modification / Gestion de CMS</h4>
                   <p class="text-start">Wordpress, Joomla, Prestashop, phpBB, IPBoard</p>

                   <h4 class="text-start">Intégration (X)HTML / CSS</h4>
                   <p class="text-start">Codage à la main respectueux des standards du Web</p>

                   <h4 class="text-start"> Dynamise des pages par JavaScript / AJAX </h4>
                   <p class="text-start">jQuery, Prototype, Mootools, Scriptaculous</p>

                   <h4 class="text-start">Validation W3C, WAI & référencement naturel SEO</h4>
                   <p class="text-start"> Accessibilité & ergonomie des pages web </p>

                   <h4 class="text-start"> Conception multi-plateformes </h4>
                   <p class="text-start">Compatible tous supports, tablette & application mobile</p>
               </div>

               <div class="col">
                   <h1>Compétences en développement</h1>
                   <h1>Compétences en conception graphique</h1>
               </div>

               <h1 class="text-center">Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h1>
           </div>
       </div>
   </div>

   <div class="container text-center" href="scrollspyHeading4">
       <h1>MES PROJETS</h1>
       <h4>Une partie des projets sur lesquels j'ai travaillé</h4>
   </div>

   <div class="container text-center" href="scrollspyHeading6">
       <h1>À PROPOS</h1>
       <h4>Je suis développeur web freelance et j'aime ça !</h4>
       <div class="row">
           <div class="col">
               <h4 class="text-start">Un développeur web passionné !</h4>
               <p class="text-start">Ma passion pour le développement web commence en 2003 et m'a demandé un changement
                   radical de cursus
                   afin de pouvoir pleinement l'exploiter.</br> </br>

                   Dès lors, je mis tout en oeuvre pour percer dans cette voie, tout en prenant du plaisir sur les
                   divers projets développés.</br> </br>

                   En Mai 2009, je décide de devenir développeur web indépendant après plusieurs postes en tant que
                   développeur web « full-stack » réussis, qui me conforteront dans cette idée afin de toucher un plus
                   large panel de domaines d'activités, voir du pays et conquérir le monde !</p>
           </div>

           <div class="col">
               <img src="images/index.jpeg" class="d-block w-100" alt="...">
           </div>

           <div class="col">

               <h4 class="text-start">Expérience en développement</h4>

               <p class="text-start"> Mon expérience acquise au fil des projets me permet de mieux comprendre les
                   attentes d'un client
                   et de
                   répondre précisement au besoin demandé en fonction du domaine d'activité.</p>

               <p class="text-start">Du site vitrine au projet plus complexe, je vous propose une expertise et un
                   développement web qui
                   correspond à vos attentes & à vos besoins.</p>

               <h3 class="text-start">Un tarif adapté à votre projet</h3>

               <p class="text-start"> Travaillant régulièrement avec des PME, associations ou particuliers, je vous
                   propose des solutions
                   à
                   votre portée & adaptée à votre budget.</p>

           </div>
       </div>
   </div>

   <div class="container text-center" href="scrollspyHeading7">
       <h1>CONTACTEZ-MOI</h1>
       <h3>Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h3>

       <div class="row">
           <div class="col text-start">
               <h6>ADRESSE</h6>
               <p>45, allée des Grives 83390 Cuers</p>
               <h6>Téléphone</h6>
               <p>(+33) 6.15.42.10.45</p>
               <h6>E-mail</h6>
               <p>contact@mcrevoulin.com</p>
               <h6>Horaires</h6>
               <p>Lundi - Vendredi

                   09H00 - 18H00</p>
               <h6>S.I.R.E.N</h6>
               <p>522 491 000</p>
           </div>
           <div class="col">
               <iframe
                   src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84484.16954505828!2d7.69203969606045!3d48.56905316140801!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4796c8495e18b2c1%3A0x971a483118e7241f!2sStra%C3%9Fburg%2C%20Frankreich!5e0!3m2!1sde!2sde!4v1658941325979!5m2!1sde!2sde"
                   width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"
                   referrerpolicy="no-referrer-when-downgrade"></iframe>
               <iframe
                   src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d316530.06898113067!2d38.75890546037433!3d51.69843674434513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x413b2f5ce874e813%3A0x48d94c0efba762bd!2sWoronesch%2C%20Oblast%20Woronesch%2C%20Russland!5e0!3m2!1sde!2sde!4v1658941426253!5m2!1sde!2sde"
                   width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"
                   referrerpolicy="no-referrer-when-downgrade"></iframe>
           </div>
           <div class="col">
               Column
           </div>
       </div>

   </div>

   <script src="js/javascript.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
       crossorigin="anonymous"></script>
</body>

</html>

CSS

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
/* Modify the background color */
.navbar-custom {
  background-color: rgba(255, 255, 255, 0.37);
}

.navbar-nav .nav-item .nav-link {

  color: white;

}


.nav-item a:hover {
  color: cyan;
  box-shadow: inset 0 -2.5px 0 0 cyan; 
}

.carousel-inner .carousel-item>img {
  -webkit-animation: thing 20s;
  -o-animation: thing 20s;
  animation: thing 20s;
}

@keyframes thing {
  from {
    transform: scale(1, 1);
  }

  to {
    transform: scale(1.5, 1.5);
  }
}

但它不工作我不明白为什么，在我看来，代码是正确的，但当我传递导航栏的链接悬停改变颜色不工作.我应该做什么来解决这个代码问题？我已经尝试从其他主题的代码，但不解决我的问题

twitter-bootstrap

2条答案

按热度按时间
92dk7w1h

92dk7w1h1#

这是因为您在：hover之前使用了父选择器

.navbar-nav .nav-item .nav-link {

  color: white;

}

试用

.navbar-nav .nav-item .nav-link:hover {
  color: cyan;
  box-shadow: inset 0 -2.5px 0 0 cyan; 
}
赞(0）分享  回复(0）举报  2022-12-08
umuewwlo

umuewwlo2#

使用设置默认颜色的同一选择器，只添加:hover。我也添加一些背景颜色以供娱乐
第一个

赞(0）分享  回复(0）举报  2022-12-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com