更改下拉文本顏色 html

Question

我剛剛開始學習 HTML 和 CSS，並開始構建一個簡單的網站來即時學習。

我正在嘗試構建一個下拉菜單，當用戶將鼠標懸停在鏈接上時打開該菜單（我的代碼中的 dropbtn）。 當下拉菜單打開時（當用戶將鼠標懸停在按鈕或任何下拉選項上時），我希望按鈕的背景顏色和文本顏色發生變化。 作為參考，您可以查看http://www.cibc.ca 。 他們的導航欄是栗色/紅色，但是一旦用戶將鼠標懸停在按鈕上，按鈕顏色就會切換為灰色（以匹配下拉菜單）並且文本顏色變為栗色。 當用戶向下移動到下拉選項時，顏色保持不變，並且只有在光標完全移出下拉菜單時才會恢復。

到目前為止，我已經成功地創建了菜單，當用戶將鼠標懸停在按鈕上時，它會打開並且按鈕的背景顏色和文本顏色會發生變化。 但是，當用戶將光標從按鈕上移到下拉選項之一上時，按鈕文本的顏色會恢復為原來的幽靈白色，因此無法看到文本。 我正在尋找在下拉菜單關閉之前保持顏色變化的方法。

這是我在 stackoverflow 上的第一篇文章，所以請原諒我對這篇文章的任何問題。

編輯：添加我碰巧在另一個問題上找到的這行代碼有效。 不幸的是，我不知道它為什么起作用，因此將不勝感激。

#nav li:hover > a, #nav li:hover > a:link, #nav li:hover > a:visited{color:white;}

HTML：

<div>
<ul id = "menu">
    <li><a class = "active" style = "color:dodgerblue" href = "http://www.google.ca">Home</a></li>
    <li><a href = "website1.html">Projects</a></li>
    <li><a href = "http://www.twitter.com">Community Involvement</a></li>

    <li class = "dropdown">    
        <a class = "dropbtn" href = "#">Social Media</a>
        <div class = "dropdown-content">
            <a href = "http://www.facebook.com">Facebook</a>
            <a href = "http://www.twitter.com">Twitter</a>
            <a href = "http://www.instagram.com">Instagram</a></div>
    </li>

    <li><a href = "http://www.twitter.com">Join Our Team</a></li>
    <li><a href = "http://www.twitter.com">FAQ</a></li>
    <li><a href = "http://www.twitter.com">About Us</a></li>
    <li><a href = "http://www.twitter.com">Contact Us</a></li>
</ul>

CSS：

ul#menu li.dropdown .dropbtn{
        display:inline-block;
        color:ghostwhite;
        text-decoration:none;
        text-align:center;
        padding:14px 16px;
    }

ul#menu li a:hover:not(.active), .dropdown:hover .dropbtn{
        background-color:ghostwhite;
        color:dodgerblue;
        }
        .active{
            background-color:ivory;
        }

ul#menu li.dropdown{
        display:inline-block;
        }
ul#menu .dropdown-content {
        display: none;
        position: absolute;
        background-color: ghostwhite;
        min-width: 160px;
    }
ul#menu .dropdown-content a{
        color:dodgerblue;
        padding: 12px 16px;
        text-decoration:none;
        display:block;
        text-align:left;
    }
ul#menu .dropdown .dropdown-content a:hover{
        background-color: skyblue;

    }
ul#menu .dropdown:hover .dropdown-content {
        display: block;
    }

Answer 1

 .dropdown .dropbtn { display: inline-block; color: ghostwhite; text-decoration: none; text-align: center; padding: 14px 16px; } .dropdown:hover .dropbtn { background-color: ghostwhite; color: dodgerblue; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropdown-content a { background-color: skyblue; background-color: ghostwhite; } .dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: ghostwhite; min-width: 160px; } .dropdown-content a { color: dodgerblue; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }

 <div> <ul id="menu"> <li><a class="active" style="color:dodgerblue" href="http://www.google.ca">Home</a> </li> <li><a href="website1.html">Projects</a> </li> <li><a href="http://www.twitter.com">Community Involvement</a> </li> <li class="dropdown"> <a class="dropbtn" href="#">Social Media</a> <div class="dropdown-content"> <a href="http://www.facebook.com">Facebook</a> <a href="http://www.twitter.com">Twitter</a> <a href="http://www.instagram.com">Instagram</a> </div> </li> <li><a href="http://www.twitter.com">Join Our Team</a> </li> <li><a href="http://www.twitter.com">FAQ</a> </li> <li><a href="http://www.twitter.com">About Us</a> </li> <li><a href="http://www.twitter.com">Contact Us</a> </li> </ul> </div>

關鍵是您的懸停效果必須基於“.dropdown”，因為這是您想要具有相同效果的所有子項的容器。 我稍微更改了 css 並刪除了一些不需要的選擇器特性。

Answer 2

只需在下面的 CSS 塊中添加 !important 即可解決您的問題。 !important 減速在激活時賦予該特定樣式更多的權重。

ul#menu li a:hover:not(.active), .dropdown:hover .dropbtn{
    background-color:ghostwhite;
    color:dodgerblue!important; /* Add !important here */
}

但是，如果您的樣式按正確順序排列，並且如 orangeh0g 所說，它們也應該具有正確的選擇器，則這不是必需的。 CSS 是從文檔的頂部到底部按降序編譯/讀取的，這意味着如果在樣式表的頂部添加樣式，則任何內容都可以在之后覆蓋它，如果您選擇這樣做的話。