如何为 class 使用悬停标签？

Question

我正在使用 bootstrap 和 animate.css 构建网站我想在用户将鼠标悬停在 link 上时添加动画，link 应该摆动，为此，我用过 animate.css 类但现在我不知道在其中悬停标签请帮助

这是我的导航栏link代码

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

如果我运行这段代码那么当我打开页面时所有三个 link 都会做摇摆动画但是当我将鼠标悬停在 link[= 上时我想要摇摆动画15=]

动画取自www.animate.css

更新

我已经实现了我想要的，但现在我正在写 2 javascript 每个人都有功能 link 这很不专业所以请给我一些好的逻辑来实现同样的事情

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

如果您正在使用 jquery。使用 hover() 切换动画 class.

JQuery

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

或者您可以使用 mouseover 和 mouseout 事件来切换此动画 classes.

使其变得简单 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");
     });
 }

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

您可以为此使用 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");
});

1 个或多个动画

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

访问 here 获取详细文档。

如何为 class 使用悬停标签？

how to use hover tag for a class?

html

css

animation

css-animations

animate.css

JQuery

Javascript