Question

我想将导航栏中的“连接为”按钮的颜色与列表的其余部分匹配，但它总是较暗

.dropdown{
     background-color:rgba(255,255,255,.4);
  }

FULL CODE HERE

Answer 1

尝试这个

.dropbtn{
      color: #fff;
}
.dropbtn:hover {
      background-color: #000;
}

Answer 2

从我的理解和阅读您的代码中，我认为我找到了您想要的解决方案。在我的末端，是CodePen上的第160行：

.dropbtn：hover {background-color：#eee}

颜色不匹配的原因是因为您已经覆盖了之前的悬停代码，并且因为它在列表中处于较低位置，因此具有先例。要解决此问题，您可以删除代码或将颜色值更改为此：

.dropbtn：hover {background-color：＃000}

Answer 3

由于'Connect as'按钮具有一个已声明的类'dropbtn'，因此该类将通过CSS特异性覆盖您在CSS块'color'中声明的CSS 'nav ul li a'。重于元素标记，请尝试删除.dropbtn类上的CSS color属性并将其添加到'.dropbtn:hover'中，以便仅在悬停时才触发文本的深色

.dropbtn:hover{
 color: black;
 background-color:#283fb8 
}

.dropbtn {
  background-color: transparent;
  padding: 16px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
 }

一些注意事项，至少尝试将CSS分离到自己的文件中，然后仅通过链接添加它，这使得调试和查看问题变得容易得多。它还可以清洁并促进可重复使用性。不知道我是否能在这里回答您的要求，但希望能对您有所帮助！

匹配按钮背景到列表背景

3 个答案: