分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress 链接鼠标悬停右移效果
+

WordPress 链接鼠标悬停右移效果

WordPress 链接鼠标悬停右移效果-BanYuner

WordPress 链接鼠标悬停右移效果

内容来源

内容来源: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纯代码实现文章AJAX点赞

    WordPress纯代码实现文章AJAX点赞

    这个功能其实在很多主题中都集成进去了,DUX默认的主题里面也是有这个功能的,但是我将其删除了,之后换上了评星插件了,评 ...

    点击查看
  • WordPress页面(page)添加标签和分类功能

    WordPress页面(page)添加标签和分类功能

    WordPress页面(page)添加标签和分类功能 文章分类目录和标签功能是WordPress自带的功能,但是很多时候,喜欢使用页面的用 ...

    点击查看
  • 如何在WordPress文章中插入视频

    如何在WordPress文章中插入视频

    如何在WordPress文章中插入视频 现在很多站点都是做视频站点的,同时也有很多视频站点都是使用的CK播放器,如果你已经使用了 ...

    点击查看
  • 帅气小琦琦
  • Timle.CN
WordPress 链接鼠标悬停右移效果
8 + 3 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)
  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)回复