我正在使用 bootstrap 和 animate.css 構建網站我想在用戶將滑鼠懸停在鏈接上時添加影片鏈接應該擺動為此，我使用了 animate.css 類但現在我不知道在其中懸停標簽請幫助
這是我的導航欄鏈接代碼
<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
更新
我已經實作了我想要的，但現在我正在為每個鏈接撰寫 2 個 javascript 函式，這是非常不專業的，所以請建議我一些好的邏輯來實作同樣的事情
我的邏輯
腳本
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>
uj5u.com熱心網友回復：
您可以為此使用 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>訪問此處獲取詳細檔案。
uj5u.com熱心網友回復：
如果您使用的是 JS，那么您應該使用mouseoverandmouseout進行切換操作。
$("a").on("mouseover",function()
{
$("a").classList.add("animate__swing");
});
$("a").on("mouseout",function()
{
$("a").classList.remove("animate__swing");
});
uj5u.com熱心網友回復：
如果您使用的是 jquery。使用 hover() 切換影片類。
jQuery
$("a").hover(function () {
$(this).toggleClass("animate__swing");
});
或者你可以使用mouseover和mouseout事件來切換這個影片類。
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");
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/459076.html