how to use hover tag for a class?-CodePudding

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 ><a  href="\" style="font-size: 12px;">Home</a></li>
 <li ><a  href="\" style="font-size: 12px;">Products</a></li>
 <li ><a  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

CodePudding user response：

If you are using jquery. use hover() to toggle the animation class.

$("a").hover(function () {
    $(this).toggleClass("animate__swing");
 });

or you can make it plain javascript using mouseover and mouseout events to toggle this animated classes.

CodePudding user response：

If you are using JS than you should use mouseover and mouseout for toggle action.

$("a").on("mouseover",function()
{                  
   $("a").classList.add("animate__swing");
});

$("a").on("mouseout",function()
{                  
   $("a").classList.remove("animate__swing");
});