How to remove :hover effect from a specific element?

Issue

<div class="menu-bar">
            <ul>
                <li><a href="/Home/index.html"> <i class="fa fa-house"></i>Home</a> </i></li>
            < ul >
</div>

<style>
.menu-bar ul li a:hover {
  color: black;
  transition: all 0.2s;
  border-inline-end: 2px solid;
  border-block-end: 2px solid;

</style>

I want to remove :hover effect from that cdn icon fa fa-house.

Solution

<div class="menu-bar">
       <ul>
          <li>
             <i class="fa fa-home"></i>
             <a href="/Home/index.html">
                Home
             </a>
          </li>
    </ul>
</div>
<style>
    .menu-bar ul li a:hover {
        color: black;
        transition: all 0.2s;
        border-inline-end: 2px solid;
        border-block-end: 2px solid;
    }

    .menu-bar ul li i{
        pointer-events: none;
    }
</style>

Answered By - Syful Islam