一个简单的鼠标悬停特效

知更鸟
知更鸟
知更鸟
1527
文章
6915
评论
2012年11月4日21:11:17 31 7.1K

这个特效最终实现效果就是当鼠标移动到链接上,文字会横向移动一定距离,貌似总有人喜欢这些花花草草。添加此效果方法很简单。

首先,需加载jquery库(略过)。

其次,将下面 Javascript代码加到页面的头部:

  1. <script type='text/javascript'>   
  2. jQuery(document).ready(function($){   
  3. $('a').hover(function()   
  4. {   
  5. $(this).stop().animate({'left': '5px'}, 'fast');   
  6. }, function() {   
  7. $(this).stop().animate({'left': '0px'}, 'fast');   
  8. });   
  9. });   
  10. </script>  

第三,在样式中加入:

  1. a {position:relative}  

完成。

另外,还有个更简单的,定义一下a:hover属性,貌似更简单:

  1. a:hover {   padding: 0 0 0 8px;}  

只是不够自然而已。

这可能是换主机前最后一篇日志,下周会暂时关闭博客,等待备案通过.....

weinxin
关于本站
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
最佳 CSS 框架 Web前端

最佳 CSS 框架

在构建网站时,使用 CSS 框架是一个实时的节省,因为它为您提供了每个网页设计师和前端开发人员在制作网站时需要的工具。 CSS 框架是一个软件框架,它允许使用 HTML/CSS 进行更简单、更符合标准...
line-height安卓中不垂直居中 Web前端

line-height安卓中不垂直居中

设计响应式网页,PC端和移动端的样式兼容性,很让人挠头,最常见的就是文字垂直不居中,而且苹果手机和安卓手机下表现也不尽相同,往往苹果手机是垂直居中的,但在安卓机上字却靠上了,总是差那么一像素,应该是安...
jQuery幻灯片插件:OWL Carousel Web前端

jQuery幻灯片插件:OWL Carousel

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有以下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式...
js实时获取浏览器窗口大小 Web前端

js实时获取浏览器窗口大小

js实时获取浏览器窗口大小,我们可以使用addEventListener()方法来实现。该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件,例如window...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:31   其中:访客  29   博主  2
    • 门软 门软 5

      貌似总有人喜欢这些花花草草。 哈哈。貌似可以不用关闭备案呢?看你怎么跟主机商说哇

      • 时光的线条 时光的线条 4

        鸟哥要搬家了啊

        • 手机巴士 手机巴士 2

          离鸟可如此之近,不知能不能和鸟哥做个联接

          • 奶茶 奶茶 3

            需加载jquery库(略过)。

            略过的刚好是我不明白的,不是将Javascript代码加到页面的头部(应该是页面的任何地方吧)就可以的吗,不明白这个加载jquery库什么意思。

              • Arron Arron 7

                @ 奶茶 不懂就打开鸟哥的主题,看下就知道了哈哈

              • ssxssx ssxssx 3

                哎呀~ 好久没来鸟哥这里了噢~ 出来冒个泡拉! 哈哈 内容还是一如既往的好哇!

                • 萨龙龙 萨龙龙 4

                  效果是实现了,但确实有点简单了。

                  • 博润 博润 5

                    在天朝混,不备案是不行的。幸好我老早以前就备案了,,,不然三天两头出问题。。回来吧鸟哥。 天朝还是比较可以的。。。

                    • Arron Arron 7

                      鸟,任何主题都通用?

                      • Win7en乐园 Win7en乐园 8

                        鸟哥也要BA了呀!呵呵,最后都要走这步了

                        • 猪毛菜 猪毛菜 4

                          鸟哥,那个视频主页和相册主页是怎么弄的呢?

                          • 鬼鬼 鬼鬼 0

                            过来支持下 !!!

                            • siyue siyue's 小栈 2

                              这么简单呐,哈哈,收下了,感谢。

                              • 电子点菜系统 电子点菜系统 1

                                这个挺简单的呢

                                • 英子 英子 1

                                  我想在网站里加个 在线咨询的代码 请指教

                                  • 英子 英子 1

                                    右侧的 滑动条不管用 在哪里 修改

                                    • 魔域私服 魔域私服 1

                                      这个不错,收藏了

                                      • 君说 君说 2

                                        这个功能貌似太占资源了。。- –

                                        • 陈显栋 陈显栋 0

                                          鸟哥,我的图片切换要点击才能,怎样设成自动切换

                                          没仔细看站内文章,已经找到替换文件了,谢谢

                                          • 馒头饭 馒头饭 2

                                            有了jquery库,代码就简单了。

                                            • 红色石头 红色石头 1

                                              这个效果是什么样的啊?你的博客中使用没有啊?

                                              • HighSea HighSea 1

                                                不晓得,鸟哥的代码高亮用的是什么插件~

                                                  • 知更鸟 知更鸟

                                                    @ HighSea 你是怎么弄的我这就是怎么弄地

                                                      • HighSea HighSea 1

                                                        @ 知更鸟 看来鸟哥很有心嘛,我那边搞的太寒碜。。。

                                                          • 知更鸟 知更鸟

                                                            @ HighSea 你的没行号,是因为全局ul li标签样式list-style:none造成的,重界定一下范围

                                                              • HighSea HighSea 1

                                                                @ 知更鸟 o(︶︿︶)o 唉,是的,一语中的啊~

                                                        • office-worker office-worker 1

                                                          原来如此简单,谢谢分享

                                                          • island island 0

                                                            前来混个脸熟,早闻大名

                                                            • 减肥最快秘籍 减肥最快秘籍 1

                                                              混脸熟