时间戳

首页 > 解决方案 > 如何更改下拉文本的颜色（引导程序）

html - 如何更改下拉文本的颜色（引导程序）

问题描述

我是 bootstrap 的新手，我使用模板帮助我为 mu 网站开发导航栏，但我对如何使用单独的 CSS 文档设置导航栏的样式感到困惑。具体来说，我的下拉切换不会改变颜色。我尝试将尽可能多的元素设置为颜色：黑色，但它们实际上从未影响下拉切换文本。我可以更改颜色的唯一方法是通过 html 中的标签（我必须使用样式：“color:black;”），但它仍然不会像其他元素一样在悬停时变回白色。有谁知道我做错了什么。如果有人也可以帮助我，我还想添加一个点击动画。这是我使用的模板

<nav class="navbar navbar-expand-lg navbar-custom">
  <a class="navbar-brand" href="#"> <span> Artemis Server Hosting </span> </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
   <div class="collapse navbar-collapse" id="homepageNav">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item active">
         <a class="nav-link" href="#">Home
           <span class="sr-only">(current)</span>
         </a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="features.html">Features
         </a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="pricing.html">Pricing
         </a>
       </li>
       <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">idk</a>
         <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
           <a class="dropdown-item" href="#">yet</a>
         </div>
       </li>
     </ul>
     <img src="https://cdn4.iconfinder.com/data/icons/shopping-21/64/shopping-01-512.png" style="align:center;" height="3%" width="3%" href="cart.html">
   </div>
</nav>

   .navbar-brand {
   color: white;
  }

  .navbar-brand:hover {
  color: black;

 }

 .nav-link {
 color: black;
 }

 .nav-link:hover {
 background-color: black;
 color: white;
 border-radius: 8px;
 }

标签： htmlcsstwitter-bootstrap

解决方案

所以首先，要让你最后li一个，cursor:pointer你有两个选择：

要么放入href="#"标签<a>中，例如：<a href="#" class="nav-link dropdown-toggle" ...</a>要么在 css 中使用此属性：a:hover { cursor: pointer }

要将下拉列表涂成黑色，请尝试以下操作：

.dropdown-menu > a { background-color:black; color:white; }

推荐阅读