I'm trying to do so that when you pass with the mouse over the links the text of the navbar its color changes and border bottom, border bottom worked but i don't understand why color text doesn't change
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/[email protected]/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/[email protected]/font/bootstrap-icons.css">
<title>Savinov Denis</title>
</head>
<body>
<nav >
<div >
<a href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" >
</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarNav">
<ul >
<li >
<a href="#scrollspyHeading1">Home</a>
</li>
<li >
<a href="#scrollspyHeading2">Services</a>
</li>
<li >
<a href="#scrollspyHeading3">Compétences</a>
</li>
<li >
<a href="#scrollspyHeading4">Portfolio</a>
</li>
<li >
<a href="#scrollspyHeading6">À Propos</a>
</li>
<li >
<a href="#scrollspyHeading7">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleFade" data-bs-ride="carousel">
<div >
<div >
<img src="images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg"
style="filter: brightness(10%);" alt="...">
<div >
<h5>SAVINOV Denis</h5>
<p>Développeur Web Indépendant</p>
</div>
</div>
<div >
<img src="images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg"
style="filter: brightness(10%);" alt="...">
<div >
<h5 >Création de sites web</h5>
<p >Site vitrine, e-commerce, forum et autres</p>
</div>
</div>
<div >
<img src="images/10705380.jpg" style="filter: brightness(10%);" alt="...">
<div >
<h5 >Web design, conception graphiques</h5>
<p >Logos, plaquettes publicitaire, cartes de visites,
newsletters</p>
</div>
</div>
</div>
<button type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
<div href="scrollspyHeading1">
<h1>MES SERVICES</h1>
<h3>Des prestations adaptées à vos besoins</h3>
</div>
<div href="scrollspyHeading2">
<div >
<div >
<h5 >Gestion de projets web</h5>
<p >Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile.</p>
<h5 >Intégration Web</h5>
<p >Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p>
<h5 >Développements spécifiques</h5>
<p >Des outils adaptés à votre coeur de métier,
applications & solutions personnalisées.</p>
<h5 >Référencement naturel</h5>
<p >Affichage sémantique des informations,
des pages propres pour un référencement optimal.</p>
</div>
<div >
<img src="images/index.jpeg" alt="...">
</div>
<div >
<h5 >Conception graphique & Webdesign</h5>
<p >Logos, templates Web, plaquettes publicitaires,
cartes de visite, newsletters...</p>
<h5 >Dynamisme des pages</h5>
<p >Des animations de contenu non intrusives
pour embellir votre projet.</p>
<h5 >Interface d'administration</h5>
<p >Outils spécifiques au bon fonctionnement
de votre entreprise.</p>
<h5 >Responsive design</h5>
<p >Compatible tous supports, tablette & application mobile.</p>
</div>
</div>
<p>Compatible Mobile, Tablettes & P.C</p>
<h3>Développement Web Responsive</h3>
</div>
<div href="scrollspyHeading3">
<h1>MES COMPÉTENCES</h1>
<h3>Des compétences à votre service</h3>
<div >
<div >
<div >
<h1 >Domaines de compétences</h1>
<h4 > Gestion de projets web </h4>
<p >Site vitrine, corporate, évènementiel, e-commerce, intranet, application
mobile.</p>
<h4 > Conception graphique & Webdesign </h4>
<p >Logos, templates Web, plaquettes publicitaires, cartes de visite,
newsletters...</p>
<h4 >Applications spécifiques et Interface d'administration</h4>
<p >PHP - MySQL - AJAX / ASP.NET - C# - SQL</p>
<h4 >Mise en place / Modification / Gestion de CMS</h4>
<p >Wordpress, Joomla, Prestashop, phpBB, IPBoard</p>
<h4 >Intégration (X)HTML / CSS</h4>
<p >Codage à la main respectueux des standards du Web</p>
<h4 > Dynamise des pages par JavaScript / AJAX </h4>
<p >jQuery, Prototype, Mootools, Scriptaculous</p>
<h4 >Validation W3C, WAI & référencement naturel SEO</h4>
<p > Accessibilité & ergonomie des pages web </p>
<h4 > Conception multi-plateformes </h4>
<p >Compatible tous supports, tablette & application mobile</p>
</div>
<div >
<h1>Compétences en développement</h1>
<h1>Compétences en conception graphique</h1>
</div>
<h1 >Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h1>
</div>
</div>
</div>
<div href="scrollspyHeading4">
<h1>MES PROJETS</h1>
<h4>Une partie des projets sur lesquels j'ai travaillé</h4>
</div>
<div href="scrollspyHeading6">
<h1>À PROPOS</h1>
<h4>Je suis développeur web freelance et j'aime ça !</h4>
<div >
<div >
<h4 >Un développeur web passionné !</h4>
<p >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 >
<img src="images/index.jpeg" alt="...">
</div>
<div >
<h4 >Expérience en développement</h4>
<p > 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 >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 >Un tarif adapté à votre projet</h3>
<p > 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 href="scrollspyHeading7">
<h1>CONTACTEZ-MOI</h1>
<h3>Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h3>
<div >
<div >
<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>[email protected]</p>
<h6>Horaires</h6>
<p>Lundi - Vendredi
09H00 - 18H00</p>
<h6>S.I.R.E.N</h6>
<p>522 491 000</p>
</div>
<div >
<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:0x971a483118e7241f!2sStraßburg, Frankreich!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:0x48d94c0efba762bd!2sWoronesch, Oblast Woronesch, Russland!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 >
Column
</div>
</div>
</div>
<script src="js/javascript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
</body>
</html>
CSS
@import url("https://cdn.jsdelivr.net/npm/[email protected]/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);
}
}
But it does not work I do not understand why, it seems to me that the code is correct but when I pass on the links of the navbar the hover to change colors does not work. What should I do to fix this code issue? I have try code from others topic but don't resolved my problem
CodePudding user response：
It is because of the parent selectors you are using before the :hover on this line
.navbar-nav .nav-item .nav-link {
color: white;
}
Try with
.navbar-nav .nav-item .nav-link:hover {
color: cyan;
box-shadow: inset 0 -2.5px 0 0 cyan;
}
CodePudding user response：
Use the same selector that you use to set default color and add just :hover.
i add some background color too for fun
@import url("https://cdn.jsdelivr.net/npm/[email protected]/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;
background-color:black;
}
.nav-item .nav-link:hover {
color: cyan;
box-shadow: inset 0 -2.5px 0 0 cyan;
background-color:red;
}
.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);
}
}<!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/[email protected]/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/[email protected]/font/bootstrap-icons.css">
<title>Savinov Denis</title>
</head>
<body>
<nav >
<div >
<a href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" >
</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarNav">
<ul >
<li >
<a href="#scrollspyHeading1">Home</a>
</li>
<li >
<a href="#scrollspyHeading2">Services</a>
</li>
<li >
<a href="#scrollspyHeading3">Compétences</a>
</li>
<li >
<a href="#scrollspyHeading4">Portfolio</a>
</li>
<li >
<a href="#scrollspyHeading6">À Propos</a>
</li>
<li >
<a href="#scrollspyHeading7">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleFade" data-bs-ride="carousel">
<div >
<div >
<img src="images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg"
style="filter: brightness(10%);" alt="...">
<div >
<h5>SAVINOV Denis</h5>
<p>Développeur Web Indépendant</p>
</div>
</div>
<div >
<img src="images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg"
style="filter: brightness(10%);" alt="...">
<div >
<h5 >Création de sites web</h5>
<p >Site vitrine, e-commerce, forum et autres</p>
</div>
</div>
<div >
<img src="images/10705380.jpg" style="filter: brightness(10%);" alt="...">
<div >
<h5 >Web design, conception graphiques</h5>
<p >Logos, plaquettes publicitaire, cartes de visites,
newsletters</p>
</div>
</div>
</div>
<button type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
<div href="scrollspyHeading1">
<h1>MES SERVICES</h1>
<h3>Des prestations adaptées à vos besoins</h3>
</div>
<div href="scrollspyHeading2">
<div >
<div >
<h5 >Gestion de projets web</h5>
<p >Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile.</p>
<h5 >Intégration Web</h5>
<p >Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p>
<h5 >Développements spécifiques</h5>
<p >Des outils adaptés à votre coeur de métier,
applications & solutions personnalisées.</p>
<h5 >Référencement naturel</h5>
<p >Affichage sémantique des informations,
des pages propres pour un référencement optimal.</p>
</div>
<div >
<img src="images/index.jpeg" alt="...">
</div>
<div >
<h5 >Conception graphique & Webdesign</h5>
<p >Logos, templates Web, plaquettes publicitaires,
cartes de visite, newsletters...</p>
<h5 >Dynamisme des pages</h5>
<p >Des animations de contenu non intrusives
pour embellir votre projet.</p>
<h5 >Interface d'administration</h5>
<p >Outils spécifiques au bon fonctionnement
de votre entreprise.</p>
<h5 >Responsive design</h5>
<p >Compatible tous supports, tablette & application mobile.</p>
</div>
</div>
<p>Compatible Mobile, Tablettes & P.C</p>
<h3>Développement Web Responsive</h3>
</div>
<div href="scrollspyHeading3">
<h1>MES COMPÉTENCES</h1>
<h3>Des compétences à votre service</h3>
<div >
<div >
<div >
<h1 >Domaines de compétences</h1>
<h4 > Gestion de projets web </h4>
<p >Site vitrine, corporate, évènementiel, e-commerce, intranet, application
mobile.</p>
<h4 > Conception graphique & Webdesign </h4>
<p >Logos, templates Web, plaquettes publicitaires, cartes de visite,
newsletters...</p>
<h4 >Applications spécifiques et Interface d'administration</h4>
<p >PHP - MySQL - AJAX / ASP.NET - C# - SQL</p>
<h4 >Mise en place / Modification / Gestion de CMS</h4>
<p >Wordpress, Joomla, Prestashop, phpBB, IPBoard</p>
<h4 >Intégration (X)HTML / CSS</h4>
<p >Codage à la main respectueux des standards du Web</p>
<h4 > Dynamise des pages par JavaScript / AJAX </h4>
<p >jQuery, Prototype, Mootools, Scriptaculous</p>
<h4 >Validation W3C, WAI & référencement naturel SEO</h4>
<p > Accessibilité & ergonomie des pages web </p>
<h4 > Conception multi-plateformes </h4>
<p >Compatible tous supports, tablette & application mobile</p>
</div>
<div >
<h1>Compétences en développement</h1>
<h1>Compétences en conception graphique</h1>
</div>
<h1 >Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h1>
</div>
</div>
</div>
<div href="scrollspyHeading4">
<h1>MES PROJETS</h1>
<h4>Une partie des projets sur lesquels j'ai travaillé</h4>
</div>
<div href="scrollspyHeading6">
<h1>À PROPOS</h1>
<h4>Je suis développeur web freelance et j'aime ça !</h4>
<div >
<div >
<h4 >Un développeur web passionné !</h4>
<p >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 >
<img src="images/index.jpeg" alt="...">
</div>
<div >
<h4 >Expérience en développement</h4>
<p > 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 >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 >Un tarif adapté à votre projet</h3>
<p > 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 href="scrollspyHeading7">
<h1>CONTACTEZ-MOI</h1>
<h3>Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h3>
<div >
<div >
<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>[email protected]</p>
<h6>Horaires</h6>
<p>Lundi - Vendredi
09H00 - 18H00</p>
<h6>S.I.R.E.N</h6>
<p>522 491 000</p>
</div>
<div >
<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:0x971a483118e7241f!2sStraßburg, Frankreich!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:0x48d94c0efba762bd!2sWoronesch, Oblast Woronesch, Russland!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 >
Column
</div>
</div>
</div>
<script src="js/javascript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
</body>
</html>