Question

我刚刚开始学习HTML＆amp; CSS并已开始构建一个简单的网站，以便即时学习。

我正在尝试构建一个下拉菜单，当用户将鼠标悬停在链接上时（我的代码中为dropbtn），该菜单会打开。我希望当下拉菜单打开时（当用户将鼠标悬停在按钮或任何下拉选项上时），按钮的背景颜色和文本颜色会发生变化。作为参考，您可以查看http://www.cibc.ca。他们的导航栏是栗色/红色，但是一旦用户将鼠标悬停在按钮上，按钮颜色将切换为灰色（与下拉菜单匹配），文本颜色将变为栗色。当用户向下移动到下拉选项时，颜色保持不变，并且只有在光标完全从下拉菜单移开后才会恢复。

到目前为止，我已设法创建菜单，使其打开，当用户将鼠标悬停在按钮上时，按钮的背景颜色和文本颜色会发生变化。但是，当用户将光标移离按钮并进入其中一个下拉选项时，按钮文本的颜色将恢复为原始的ghostwhite，因此无法看到文本。我正在寻找方法来保持颜色的变化，直到下拉菜单关闭。

这是我关于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即可解决您的问题。重要的减速在激活时会更加重视特定的风格。

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

但是，如果您的样式处于正确的顺序并且如orangeh0g所述，则这不是必需的，它们也应该具有正确的选择器。 CSS是从文档的顶部到底部编译/读取的，这意味着如果在样式表的顶部添加了样式，则可以在之后覆盖它，如果您选择这样做。

更改下拉文字颜色html

2 个答案: