Application des changements de couleur de la barre de navigation au menu déroulant

Question

J'essaie d'appliquer des changements de couleur au texte de ma barre de navigation pour les liens qui: ont été visités, sont actuellement actifs et sont survolés. Cela fonctionne bien pour tous mes éléments de lien hypertexte réguliers, cependant puisque j'ai déjà occupé le descripteur de classe pour mon bouton de menu déroulant (bouton class = "dropbtn"), je ne peux pas comprendre comment je peux le faire changer de couleur quand l'utilisateur est sur une page du menu déroulant, ou comment le faire changer de couleur une fois visité, puisque vous ne «visitez» jamais vraiment le bouton, seulement les liens qu'il contient.

.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropbtn:hover { 
 
    color: #874c16; 
 
    font-size: 20px; 
 
} 
 

 
.dropbtn:visited { 
 
    color: #8b4e14; 
 
} 
 

 
.dropbtn.active { 
 
    color: #ffe7d1; 
 
} 
 

 
.navbar a:hover { 
 
    color: #874c16; 
 
    font-size: 20px; 
 
} 
 

 
.navbar a:visited { 
 
    color: #8b4e14; 
 
} 
 

 
.navbar a.active { 
 
    color: #ffe7d1; 
 
}

<div class="navbar"> 
 
    <a href="index.html">Home</a> 
 
    <div class="dropdown"> 
 
    <button class="dropbtn">Cuisine 
 
\t \t \t \t \t <i class="fa fa-caret-down"></i> 
 
\t \t \t \t \t </button> 
 
    <div class="dropdown-content"> 
 
     <a href="indian.xml">Indian</a> 
 
     <a href="italian.xml">Italian</a> 
 
    </div> 
 
    </div> 
 
    <a href="http://www.blogtyrant.com/best-about-us-pages/">About us</a> 
 
    <a href="http://www.blogtyrant.com/best-contact-us-pages/">Contact</a> 
 
    <a href="https://media.termsfeed.com/pdf/terms-and-conditions-template.pdf">Terms and Conditions</a> 
 
    <a href="https://www.visser.com.au/blog/generic-privacy-policy-for-australian-websites/">Privacy Policy</a> 
 
    <a href="datacollect.html">Customer Feedback</a> 
 

 
</div>

En dépit de la solution étant probablement simplement, que je suis dans ce domaine depuis longtemps et apprécierons fortement toute entrée. Merci les gars (:

Edit:. changer la classe de bouton à une classe d'ancrage ne fonctionne pas aussi parce que le haut point d'ancrage « cuisine » est jamais réellement cliquée, seuls les éléments d'ancrage en son sein

Edit 2: I n'était pas clair dans ma question, je veux que la "cuisine" change de couleur quand l'utilisateur est une page qui est liée à l'une des ancres à l'intérieur, donc quand ils cliquent sur "Indien" ou "Italien", je veux une cuisine pour être une couleur différente si elles étaient sur dites la page d'accueil.Je veux aussi "cuisine" pour changer sa couleur par défaut si elle a été visitée dans le passé

Answer 1

pseudo-classes :visited:active ne s'applique pas à button éléments, mais seulement à a éléments. Il est donc préférable de réécrire le code de votre bouton et de le transformer en élément d'ancrage a.

$('.dropdown a').click(function() { 
 
    $('.dropdown').css('background', 'red'); 
 
});

.dropdown:hover .dropdown-content { 
 

 

 
display: block; 
 

 
} 
 
.dropbtn { 
 
    display:block; 
 
    height: 30px; 
 
    line-height:30px; 
 
    width: 100px; 
 
    text-align: center; 
 
    background:#ccc; 
 
    border-radius:5px; 
 
    border: 1px solid #bbb; 
 
    text-decoration: none 
 
} 
 
.dropbtn:hover{ 
 
    color:#874c16; 
 
    font-size:20px; 
 

 
} 
 

 
.dropbtn:visited{ 
 
    color:#8b4e14; 
 
} 
 

 

 
.dropbtn.active{ 
 
    color:#ffe7d1; 
 
} 
 

 

 
.navbar a:hover{ 
 
    color:#874c16; 
 
    font-size:20px; 
 

 
} 
 
.navbar a:visited{ 
 
    color:#8b4e14; 
 
} 
 

 

 
.navbar a.active{ 
 
    color:#ffe7d1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar"> 
 
      <a href="index.html" >Home</a> 
 
      <div class="dropdown"> 
 
       <a class="dropbtn" href="#">Cuisine 
 
        <i class="fa fa-caret-down"></i> 
 
       </a> 
 
       <div class="dropdown-content"> 
 
        <a href="indian.xml">Indian</a> 
 
        <a href="italian.xml">Italian</a> 
 
       </div> 
 
      </div> 
 
      <a href="http://www.blogtyrant.com/best-about-us-pages/">About us</a> 
 
      <a href="http://www.blogtyrant.com/best-contact-us-pages/">Contact</a> 
 
      <a href="https://media.termsfeed.com/pdf/terms-and-conditions-template.pdf">Terms and Conditions</a> 
 
      <a href="https://www.visser.com.au/blog/generic-privacy-policy-for-australian-websites/">Privacy Policy</a> 
 
      <a href="datacollect.html">Customer Feedback</a> 
 

 
     </div>