如何对类使用悬停标记

Question

我正在使用bootstrap和animate.css构建一个网站。当用户悬停在链接上时，我想添加动画，为此，我使用了animate.cs类，但现在我不知道在其中悬停标签，请帮助

这是我的导航条链接代码

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

如果我运行这个代码，那么当我打开页面时，所有三个链接都会进行摆动动画，但当我悬停在链接上时，我想要摆动动画

动画取自www.animate.css

更新

我已经实现了我想要的，但现在我正在写2javascript函数用于每个链接，这是非常不专业的，所以请建议我一些好的逻辑来实现相同的

MyLogic

编写脚本

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

<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

您可以使用JavaScript或jQuery来实现这一点。

例如：-

$(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");
});

一个或多个动画

$(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");
});
});

附加

有一个animate.css-dynamic库，它很容易与一些实用程序类等一起使用。

对于使用此库的案例，您可以执行以下操作。

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

请访问此处获取详细文档。

Answer 2

如果使用JS，则应该使用mouseover和mouseout进行切换操作。

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

Answer 3

如果您使用的是jquery。使用hover()切换动画类。

JQuery

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

或者您可以使用mouseover和mouseout事件来切换这个动画类，使其成为纯javascript。

Javascript

const atag = document.querySelectorAll("a");
for (let i = 0; i < atag.length; i++) {
atag[i].addEventListener("mouseover", function() {
cbox[i].classList.add("animate__swing");
});
atag[i].addEventListener("mouseout", function() {
cbox[i].classList.remove("animate__swing");
});
}