如何让鼠标移过页面时页面中的链接发生振动？

我改变了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

如何让鼠标移过页面时页面中的链接发生振动？

回答

相关问题