how to use hover tag for a class?

Question

I am building a website using bootstrap and animate.css I want to add animation when the user hovers over a link the link should swing and for this, I used animate.css classes but now I don't know to hover tag in it please help

this is my navbar link code

 <li class="nav-item"><a class="nav-link active animate__animated animate__swing" href="\" style="font-size: 12px;">Home</a></li>
 <li class="nav-item"><a class="nav-link active animate__animated animate__swing" href="\" style="font-size: 12px;">Products</a></li>
 <li class="nav-item"><a class="nav-link active animate__animated animate__swing" href="\" style="font-size: 12px;">contact us</a></li>

if I run this code then all three links will do swing animation when I will open the page but I want swing animation when I hover over a link

the animation is taken from www.animate.css

UPDATE

I have implemented the which i wanted to but now i am writting 2 javascript function for every one link and that is very unprofessional so please suggest me some good logic to implement the same thing

MyLogic

Script

function mouseover()
  {
    const el = document.getElementById("1");
    el.className = "nav-link active animate__animated animate__swing";
  }
  function mouseout()
  {
    const el = document.getElementById("1");
    el.className = "nav-link active";
  }

HTML Code

  <li class="nav-item"><a class="nav-link active" id="1" onmouseover="mouseover();" onmouseout="mouseout();" href="\" style="font-size: 12px;">Home</a></li>
  <li class="nav-item"><a class="nav-link active" id="2" href="\" style="font-size: 12px;">Products</a></li>
  <li class="nav-item"><a class="nav-link active" id="3"  href="\" style="font-size: 12px;">contact us</a></li>

Answer 1

You can use JavaScript or jQuery for this.

For example:-

$(elem).mouseover(function(){
  $(this).addClass("animate__animated animate__flip");
  //You can add some other classes as well
}); 
//If you want the animation to happen every time you hover on element
$(elem).mouseout(function(){
  $(this).removeClass("animate__animated animate__flip");
});

1 or more animations

$(elem).mouseover(function(){
    $(this).addClass("animate__animated animate__flip");
    //You can add some other classes as well
    this.addEventListener('animationend',() => {
       $(this).removeClass("animate__animated animate__flip");
       //the second animation now
       $(this).addClass("animate__animated animate__bounce");
    });
});

Extras

There is a library animate.css-dynamic which is simple to use with some utility classes and more.

For for your case using this library you can do something like this.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/KodingKhurram/animate.css-dynamic@main/animate.min.js"></script>

<h2 align="center"> Mouse over the links to animate</h2>
<li class="nav-item"><a class="nav-link active ani_swing aniUtil_onMouse aniUtil_active" id="1" href="\" style="font-size: 12px;display: inline-block">Home</a></li>
  <li class="nav-item"><a class="nav-link active ani_bounce aniUtil_onMouse aniUtil_active" id="2" href="\" style="font-size: 12px;display: inline-block">Products</a></li>
  <li class="nav-item"><a class="nav-link active aniCus_OutIn-fadeOutLeft-fadeInRight aniUtil_onMouse aniUtil_active" id="3"  href="\" style="font-size: 12px;display: inline-block">contact us (this animation is special)</a></li>

visit here for detailed documentation.