WordPress 链接鼠标悬停位移效果

Timle.CN:专注 WordPress建站WordPress主题WordPress插件 分享,同时也关注各种 建站资源前端技巧免费资源IT互联网热点 。CTRL+D即可收藏本站,我们期待您的再次光临!

[文章目录]

网站建设时,大家都希望网页的每一个设计元素更贴合用户需求,并通过各种细节来提高用户的体验。网页上的超链接显示效果却往往很容易被忽略。

今天给大家分享,怎么来让链接实现鼠标悬停位移效果。

本站演示地址:http://www.timle.cn/archives 点击查看   先来张效果图:

WordPress 链接鼠标悬停移动效果点击放大查看动态效果图

纯CSS方式

.archives a:hover{marginleft:10px;background:#eee} 
/*.archives a 改成你标题的样式名称,可以应用多个链接,用英文逗号隔开*/

纯JS方式

jQuery(document).ready(function($){
    $('.archives a').hover(function() {
    /*.archives a 改成你标题的样式名称,可以应用多个链接,用英文逗号隔开*/
    $(this).stop().animate({'marginLeft': '10px'}, 200);}, function() {
    $(this).stop().animate({'marginLeft': '0px'}, 200);
    });
});

JS方式实现位移,相对于CSS方式更加平滑。以上两种方法,任选一种添加即可。

版权声明:本站所有文章和资源使用CC BY-NC-SA 3.0 CN协议发布,转载应当以相同方式注明并注明文章来自“Timle.CN -> WordPress 链接鼠标悬停位移效果”。在页面右边可以分享本文哦!

有 17 发吐槽 关于 “WordPress 链接鼠标悬停位移效果

  1. 沙发
    mikifuns 2015-08-8
    :shock: 学习了
  2. 板凳
    Sven 2015-08-10
    本来我的是悬停的,后来去掉了 :eek:
    • 回复
      Timle.CN 2015-08-11
      @Sven :mrgreen: 还是你厉害呀,你没学计算机真是浪费呀。
  3. 地板
    灰常记忆 2015-08-14
    制作主题需要注意这些细节吧·
  4. 4楼
    iEdon 2015-08-15
    用这个对用户体验给常好。 :idea:
  5. 5楼
    小幻 2015-08-25
    用户体验不错
  6. 6楼
    黄月文 2015-09-4
    贵站速度很给力,
  7. 7楼
    Z.Choi 2015-09-20
    TIM兄,最近还好吗?我的网站关停了段时间,终于又回来啦! :mrgreen:
  8. 8楼
    帅气小琦琦 2015-10-17
    学习了,一开始不知道添加到哪里,后来尝试出来了
  9. 9楼
    萌嘟嘟 2015-10-17
    http://www.mengdodo.com/ 求回访 ,哈哈
  10. 10楼
    ScottJu 2015-10-28
    木有效果哎。 :sad:
  11. 11楼
    李阳博客 2015-11-24
    很多有用的教程哈
  12. 12楼
    空格SEO 2015-11-26
    http://www.zpgbk.com/ 求回访 ,哈哈
  13. 13楼
    鲜活 2015-12-13
    xfire 这个主题? 自用的? 很好看 :smile: :smile:

疑问 难过 胜利 微笑 抠鼻 可爱 抓狂 偷笑 奋斗 衰 撇嘴 色 贼笑 爬虫 鼓掌 发怒 擦汗 握手 酷 玫瑰 哭 呲牙

WordPress 链接鼠标悬停位移效果
22 票, 4.95 平均等级 ( 98% 分 )