How to hover on the <li> element and toggle between the 2 icons[without JavaScript]

user_11484217 0
Viewed 175

I am trying to toggle between 2 icons whenever hover on the list, so that on hover on the link icon changes to another icon, and when we remove the hover it resets to the original icon.

<li>
 <span class="icons">
      <i class="ic1 far fa-check-circle"></i>
      <i class="ic2 fas fa-volume-up"></i>
 </span>
 <span>
     <a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</a>
  </span>
</li>

This is my js fiddle

Any help would be great :)

font-awesome hover css html
2 Answers

Even tho the Code isnt the cleanest, I guess that's what you are trying to achieve correct?

I didn't have the Font Awesome Icons thats why I inserted a and b

.hidden {
  display: none
}

li:hover .fa-check-circle {
 display: inline;
}

li:hover .fa-volume-up {
 display: none;
}
 <li>
   <span class="icons">
      <i class="ic1 far hidden fa-check-circle">a</i>
      <i class="ic2 fas fa-volume-up">b</i>
  </span>
  <span>
    <a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</a>
  </span>
</li>

user_88653370

I'd add .fa-fw to the icons to prevent the wobble effect.

li:not(:hover) > .icons > .ic2 {
  display: none;
}

li:hover > .icons > .ic1 {
  display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<li>
  <span class="icons">
      <i class="ic1 far fa-check-circle fa-fw"></i>
      <i class="ic2 fas fa-volume-up fa-fw"></i>
  </span>
  <span>
    <a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</a>
  </span>
</li>

user_74511090
Related