如何讓鼠標移過頁面時頁面中的鏈接發生振動？

我改變了CSS這使振動效果，我加入這個CSS代碼到我的網站。

a.navlinkOff { 
    font-family: Arial !important; 
    font-weight: bold; 
} 
a.navlinkOver1 { 
    font-family: Arial !important; 
    font-weight: bold; 
} 
a.navlinkOver2 { 
    font-family: Lucida Sans Unicode !important; 
    font-weight: bold; 

}

我嘗試添加ID和班級的導航菜單，但由於某種原因，它仍然無法正常工作。該代碼根本沒有做任何事情。

<div id="navleft"> 
    <ul> 
    <li><a href="tops.html" id="navlink1" class="navlinkOff">Tops</a></li> 
    <li><a href="bottoms.html" id="navlink2" class="navlinkOff">Bottoms</a></li> 
    <li><a href="hoodies.html" id="navlink3" class="navlinkOff">Hoodies</a></li> 
    <li><a href="accessories.html" id="navlink4" class="navlinkOff">Accessories</a></li> 
    <li><a href="clearance.html" id="navlink5" class="navlinkOff">Clearance</a></li> 
    </ul> 
</div>

所以我想知道是否會更簡單，只是使網站上的所有鏈接振動。我也試過改變JavaScript是這樣的

var navlinks = document.querySelectorAll("a");

但是，這仍然不能在我的網站上工作。

來源

2013-04-23 user2234760

你的小提琴適合我在Firefox中使用。 – showdev 2013-04-23 23:25:18

貌似有人正在修復一個遺留系統，現在Firefox正在刪除：blink：:) – Codeman 2013-04-23 23:26:00

在你問「我怎麼能？」之前，你應該問自己「爲什麼我會？」。 – ryanbrill 2013-04-23 23:28:02

一樣，這...例如：

@-webkit-keyframes thumb { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(0.9); } 
    100% { -webkit-transform: scale(1); } 
} 

a:hover 
{ 
    -webkit-animation-name: thumb; 
    -webkit-animation-duration: 200ms; 
    -webkit-transform-origin:50% 50%; 
    -webkit-animation-iteration-count: 2; 
    -webkit-animation-timing-function: linear; 
}

http://www.cssreset.com/css3-webkit-animation-shake-links/

來源

2013-04-23 23:26:56 Timmerz

哈哈，這是非常酷的基於webkit的broswers – Xotic750 2013-04-24 00:00:42

您需要使用來定義您的懸停狀態的CSS選擇器：hover僞選擇。

一個：懸停 {

}

而且我也不會使用的重要指導建議，那就是你的CSS結構等問題的跡象。

來源

2013-04-23 23:30:17

是的，'！important'是因爲OP評論添加的：「它沒有工作，我認爲問題可能是我正在使用外部樣式表，這可能會覆蓋我嘗試使用JavaScript進行的任何操作「 – Xotic750 2013-04-23 23:57:32

如何讓鼠標移過頁面時頁面中的鏈接發生振動？

回答

相關問題