將導航欄顏色更改應用於下拉菜單

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>