一個簡單的鼠標懸停特效

知更鳥
知更鳥
知更鳥
1528
文章
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

                                                              混臉熟