分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress 链接鼠标悬停右移效果
+

WordPress 链接鼠标悬停右移效果

  • 内容来源
  • 实践过程
  • 折腾过程
  • 峰回路转
  • 总结
  • 实现功能
  • WordPress 链接鼠标悬停右移效果-BanYuner

    内容来源

    内容来源:http://www.timle.cn/wordpress-link-move.html

    实践过程

    一开始看到这个的时候,就是想尝试一下,看看是什么样子的,虽然看了演示图,但是感觉自己不实践一下是不知道什么情况的,于是我的体验之路就开始了.本来是很简单的两段代码,一个是通过CSS来加载的,一个是通过js来加载的,根据原作者说的,js的要比css的顺滑不少,于是乎,我就选择了js代码进行尝试了,可是问题来了,文章作者并没有说代码添加到哪里,对于我这个小白,我有点混乱了,代码虽好,但是你不告诉我添加到哪里,这怎么搞

    折腾过程

    于是我就开始折腾了,首先观察代码,开始的头部jQuery这个关键词,于是我找到了include目录下,有个js的目录,正好有这么一个单独的文件,但是添加到文件中的哪个部分呢,我还是不知道,于是我就不断尝试,头部,中间,尾部,均无果,后来百度了一下为什么添加js代码没有效果,有一篇文章说是因为$符号的问题,要替换这个符号为jQuery,于是乎,我也进行替换了,还是没有效果.自尝试了很多次自后,我放弃了,想着这段代码方正也是很少,作用并不是很大,就直接保存书签不管了

    峰回路转

    今天回家之后,又打开了这个书签,简单的看了一下,然后灵光一闪,是不是根本就不应该添加到那个文件中呢,这个效果是实现归档页面右移的作用的,那么应该是基于归档页面的代码啊.就这样,我开始操作了,FTP下载了归档页面的文件,开始找,找到了一个script,我把代码尝试性的丢在这个之前,覆盖站点文件,刷新网页,有效果了.就这样,这个代码被我利用起来了

    总结

    首先根据这个情况,我个人总结出几个问题:
    一:代码这个东西是很神奇的,添加的位置不一样或者不对,要么没效果,要么就是排版乱了
    二:在不知道代码应该添加到哪里的情况下,我们可以进行不断尝试,但是一定要做好文件的备份工作
    三:有时候,如果一个事情你无法解决并不是你的智商或者能力问题,可能是有一定的运气以及你的脑袋瓜子是不是发热的问题

    实现功能

    这里我就附上代码,大家可以自己尝试一下:

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

    微信扫码,关注我们

    扫码,支持我

    WordPress 链接鼠标悬停右移效果

    支付宝(点击图片切换)

    扫码,支持我

    WordPress 链接鼠标悬停右移效果

    微信(点击图片切换)

    扫码,手机看

    WordPress 链接鼠标悬停右移效果
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    相关推荐

    • WordPress添加评论内容字数限制

      WordPress添加评论内容字数限制

      很久之前我们介绍过,如何添加文章内容字数限制,有兴趣的可以去了解一下: 那么今天给大家介绍的是,如何给WordPress评论内容中添加字数限...

      点击查看
    • Giphypress-WordPress文章内容中添加GIF图片

      Giphypress-WordPress文章内容中添加GIF图片

      看了标题之后,千万不要关闭这个页面,因为这个页面里面的内容可能跟你了解的不一样。 我们都知道 WordPress 可以通过添加媒体来上传 G...

      点击查看
    • 如何自定义WordPress登陆页面背景

      如何自定义WordPress登陆页面背景

      这个功能是一个小功能,但是就我了解到的,目前还是有很大一部分主题都是使用的了这个功能的,所以这里还是简单的介绍一下实现方法。 首先我们看到登...

      点击查看
    WordPress 链接鼠标悬停右移效果
    3 + 4 =
    • 昵称 (必填)  
    • 邮箱 (必填)
    • 网址 (选填)
    1. 1楼
      Timle.CN
      $('.archives a').hover(function() 改为: $('.archives a,.widget, .widget a,.entry-title a').hover(function() 试试,记得把js代码添加到全局js里面。
      Timle.CN 2年前 (2015-10-17)回复
      • 帅气小琦琦
        这样的话,很多地方都可以位移了,效果更佳 :lol:
        帅气小琦琦    2年前 (2015-10-17)回复