如何去除特定元素的 :hover 效果？

Question

<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>

我想从 fa fa-house 的 cdn 图标中删除 :hover 效果。

Answer 1

<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>

Answer 2

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

只需从

<i>

标签中取出

<a>

元素（图标）即可。

Answer 3

你可以试试这个：-

    <div class="menu-bar">
        <ul>
            <li><i class="fa fa-house"><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>