Question

我会改变我的活跃导航丸的颜色，我试过各种方式，但我没有这样做。当鼠标在药丸上或点击它们时，此代码仅更改药丸颜色（文本颜色不变），但在它们处于活动状态时则不会。请帮帮我

.nav-pills>li>a.active,
.nav-pills>li>a:hover,
.nav-pills>li>a:focus {
  background-color: deepskyblue;
  color: white;
}

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="C:\Users\Fabry\Desktop\scuola\html\Immagini\Commercial Services\CS.ico" width="30" height="30" class="d-inline-block align-top" alt=""> Commercial Services
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <ul class="nav navbar-nav nav-pills nav-fill">
      <li class="nav-item">
        <a class="nav-link active" href="#" data-toggle="tab" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" data-toggle="tab" role="tab" aria-controls="home" aria-selected="false">Servizi</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" data-toggle="tab" role="tab" aria-controls="home" aria-selected="false">Partners</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" data-toggle="tab" role="tab" aria-controls="home" aria-selected="false">Prenota</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" data-toggle="tab" role="tab" aria-controls="home" aria-selected="false">Contattaci</a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

split

使用重要来覆盖你的班级

Answer 2

你也可以试试这个：

ul{
  list-style-type:none;
}

li a{
  text-decoration: none;
  width:50px;
  text-decoration: none;
}

li a:hover{
  color:white;
}

li:hover{
  text-decoration: none;
  background:blue;
  text-color:white;
  width:70px;
  height:30px;
}

Answer 3

如果您想更改背景和颜色的bot，可以这样做（对于bootstrap4）

.nav-pills .nav-link.active, .nav-pills .nav-link.active:hover,.nav-pills .nav-link.active:focus{
    background-color:deepskyblue;
    color:white;
    font-weight:550;

    }

css - 更改活动导航丸颜色Bootstrap

3 个答案: