How to remove :hover effect from an element?-CodePudding

<div >
            <ul>
                <li><a href="/Home/index.html"> <i ></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.

CodePudding user response：

<div >
    <ul>
        <li><i ></i><a href="/Home/index.html"> Home</a> </i></li>
    <ul >

Just get out <i> element (icon) from the <a> tag.

CodePudding user response：

<div >
       <ul>
          <li>
             <i ></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>

CodePudding user response：

You can try this:-

    <div >
        <ul>
            <li><i ><a href="/Home/index.html"> </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>