分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 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,但是很多用户不会修改自己站点的默认WordPress图标,就会跟我的站点一样,看上去非常不美观, ...

    点击查看
  • WordPress简易集成Markdown教程

    WordPress简易集成Markdown教程

    今天首先在群里面看到一个用户询问是否有方法将Markdown集成到主题里面去,后来我一想,这个所谓的Markdown确实是很多人提到 ...

    点击查看
  • WordPress制作简易年度总结页面

    WordPress制作简易年度总结页面

    今天早些时候已经制作一个类似112博客导航的页面,具体可以详见:

    点击查看
  • WordPress通过短代码显示指定文章内容

    WordPress通过短代码显示指定文章内容

    今天在一个WordPress交流群里面看到一个群友问一个问题,我个人方面也是很感兴趣,这个问题就是如何通过“新建文章栏输入链接 ...

    点击查看
  • 禁用WordPress 4.7版本的PDF预览功能

    禁用WordPress 4.7版本的PDF预览功能

    之前的文章我们也介绍了,关于WordPress 4.7版本中,新增了一个预览PDF的功能,详见:

    点击查看
  • WordPress获取文章的第一张图片并且显示

    WordPress获取文章的第一张图片并且显示

    关于这类的文章我们已经介绍过两种方法了,两种方法都不一样,但是适合自己的才是最好的,虽然今天我要介绍的方法可能不适合 ...

    点击查看
  • 帅气小琦琦
  • Timle.CN
WordPress 链接鼠标悬停右移效果
1 + 0 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)
  1. 1楼
    Timle.CN
    $('.archives a').hover(function()改为:$('.archives a,.widget, .widget a,.entry-title a').hover(function()试试,记得把js代码添加到全局js里面。
    Timle.CN 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信 1年前 (2015-10-17)回复
    • 帅气小琦琦
      这样的话,很多地方都可以位移了,效果更佳 :lol:
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 1年前 (2015-10-17)回复