引用animate.css做动画效果的时候，当鼠标移入

html-css016

引用animate.css做动画效果的时候，当鼠标移入,第1张

这种带动画效果的导航，其实用CSS即可实现，详见附件，我将一个项目的的一个文件精简了一下，你可以看到效果，关键的东西在general.css中，以

1

#primary_nav li a

为关键词进行搜索，大概在css文件的1588行及以后，你会见到代码，打开压缩包中的HTML文件，你可见菜单动画效果（鼠标移进移出菜单项均有）。

能用CSS的，尽量别用js吧，除非你所建网站的潜在访客或顾客是国内的，并且年龄大些。

因为是动画效果，所以截不到图，只好上一张hover静止态的截图吧：

用 hover ， animation， 和 transform 可以达到鼠标移入而开始执行动画，鼠标移出而恢复动画的原来状态。但是想要达到更精细的动画效果只能使用 js 来监听鼠标的各个事件onmouseenter， onmousemove， onmouseleave来执行动画。纯 css 是不能感知鼠标的移动事件的。

.hc_hot ul li:hover {

margin-left: -10px

}

鼠标移上.hc_hot ul li对应的元素后，触发hover状态，应用上面这条css，左边距变为-10px，达到向左移动的目的