将导航栏颜色更改应用于下拉菜单

Question

我试图将颜色更改应用于导航栏中的文本，以获取以下链接：已访问，当前处于活动状态并正在进行悬停。它对我所有的常规超链接元素都工作正常，但是因为我已经为我的下拉菜单按钮（button class =“dropbtn”）占据了'class'描述符，所以我无法弄清楚如何在改变颜色时用户在下拉菜单中的页面上，或者如何在访问过后更改颜色，因为您从不真正'访问'按钮，只有其中的链接。

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

尽管解决方案可能是简单的，我已经在这个很长一段时间，将高度赞赏任何输入。谢谢你们（：

编辑：按钮类更改为锚类也不会在它工作，因为顶部的“美食”锚实际上从未点击，只有锚定体

编辑2：我在我的问题中并不清楚，当用户是一个与其中的任何锚点链接的页面时，我想要“美食”改变颜色。因此，当他们点击“印度”或“意大利”时，我想要美食如果他们说的是主页，我也希望“美食”改变它的默认颜色

Answer 1

伪类:visited:active不适用于button元素，但仅限于a元素。 因此，如果您重写了按钮代码并将其转换为锚点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>