How can I change hover in this nav-link Bootstrap which contains span and I (icon Bootstrap)?

Question

<li class="nav-item mt-3">
    <a href="#" class="nav-link px-2 d-flex justify-content-start align-items-center">
        <i class="nav-icon bi bi-calculator-fill fs-4"></i>
        <span class="ms-2 fs-5">Comptabilité</span>
   </a>
</li>


#sidebarMenu  .nav-icon:hover span:hover{
    border-left: 4px solid #007bff;
    color: #269BF5;
}

How can I change hover in this nav-link Bootstrap which contains span and I (icon Bootstrap)?

Answer 1

.nav-item:hover{
border-left: 4px solid #007bff;
color: #269BF5;}

simply use this or you can add your custom class.