How can i put hover to the element in side bar?-CodePudding

I want to put hover into the element inside the sidebar that I already have. I try to use hover ,but it seems not working. I appreciate every answer.

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

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

<header >
  <div >
    <div id="logo" >
      <img  src="assets/img/unknown.png">
      <a href="#"  id="menu-toggle">
        <i ></i>
      </a>
    </div>
  </div>
</header>
<div >
  <div  id="sidebar">
    <!--sidebar start-->
    <div >
      <div >
        <a href="#"  data-bs-toggle="dropdown"><i ></i>Admin</a>
        <div >
          <a href="#" >A</a>
          <a href="#" >B</a>
          <a href="#" >C</a>
        </div>
      </div>
      <a href="#" ><i ></i>Cập nhật PO</a>
      <a href="#" ><i ></i>Phân loại PO</a>
      <a href="#" ><i ></i>Ước tính rebate</a>
      <a href="#" ><i ></i>Cập nhật rebate</a>
      <a href="#" ><i ></i>Báo cáo</a>
      <a href="#" ><i ></i>Tra cứu thông tin</a>
      <a href="#" ><i ></i>Hướng dẫn sử dụng</a>
    </div>
    <!--sidebar end-->
  </div>
  <div > Content
  </div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>

CodePudding user response：

your css selector is wrong this will solve your problem

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

CodePudding user response：

Is your css code connected to html?

Maybe nav-item class overrides. Use nav-link class with !important

More information: https://www.w3schools.com/css/css_important.asp

CodePudding user response：

I see your selector is incorrect.

On your html you have navbar-nav so you'll have to use .navbar-nav on your selector.

your html

...
    <!--sidebar start-->
    <div >
...

so the updated selector is .sidebar .navbar-nav .nav-link:hover

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

That will solve the problem.