如何将悬停放置到侧栏中的元素上？

Question

我想将悬停放到我已经拥有的侧栏中的元素中。我试着使用悬停，但似乎不起作用。我感谢你的每一个回答。

​

.sidebar .navbar .nav-link:hover{
  color: #EFDBFF;
  display: block;
  background: white;
  border-color: #EFDBFF;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header class="header row ">
  <div class="d-flex justify-content-between">
    <div id="logo" class="pb-2 ps-2 pe-0 col-2">
      <img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
      <a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
        <i class="fa-solid fa-angle-left py-4 pe-2"></i>
      </a>
    </div>
  </div>
</header>
<div class="body row ">
  <div class="sidebar col-2 " id="sidebar">
    <!--sidebar start-->
    <div class="navbar-nav w-100">
      <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-laptop me-2"></i>Admin</a>
        <div class="dropdown-menu bg-transparent border-0">
          <a href="#" class="dropdown-item">A</a>
          <a href="#" class="dropdown-item">B</a>
          <a href="#" class="dropdown-item">C</a>
        </div>
      </div>
      <a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Cập nhật PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Phân loại PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Ước tính rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Báo cáo</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng</a>
    </div>
    <!--sidebar end-->
  </div>
  <div class="content col-10"> Content
  </div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>

​

Answer 1

您的css选择器错误，这将解决您的问题。

.sidebar .navbar-nav .nav-link:hover{
  color: #EFDBFF;
  display: block;
  background: white;
  border-color: #EFDBFF;
}

Answer 2

您的css代码是否连接到html？

可能是nav-item类重写。将nav-link类与!important结合使用

更多信息：https://www.w3schools.com/css/css_important.asp

Answer 3

我看你的选择器不对。

在html中，您有navbar-nav，所以您必须在选择器上使用..navbar nav。

你的html

...
    <!--sidebar start-->
    <div class="navbar-nav w-100">
...

所以更新后的选择器是.sidebar .navbar-nav .nav-link:hover。

.sidebar .navbar-nav .nav-link:hover{
  color: #EFDBFF;
  display: block;
  background: white;
  border-color: #EFDBFF;
}

这将解决问题。