Begin 主题[阅读全文]按钮更改为鼠标经过滑出显示

2018-09-2100:17:19 5 643 人看过
Begin 主题[阅读全文]按钮更改为鼠标经过滑出显示

Begin 主题后台可供设置的功能选项已经非常强大,几乎不需要对源码做任何修改就已经可以满足大部分人的使用需求。但对于爱折腾的小伙伴来说,还是按捺不住那颗蠢蠢欲动想自己动手修改的心。由于我们以前做网站美化都是往主题做加法,添加一些新的样式、功能或者特效。

这次我们尝试一下为 Begin 主题做减法,就是隐藏分类文章下的”阅读全文“按钮,当我们的鼠标经过时才自动滑出显示。这样,整个页面更加干净简约。按钮滑出的动作也为页面增加了更多的趣味,何乐而不为呢?

使用的方法也非常的简单,将下面的 CSS 代码添加到网站后台”外观>主题选项>定制风格>自定义样式“中即可。

  1. /*阅读全文按钮滑出显示*/
  2. .post{overflow:hidden;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s}
  3. .post:hover{box-shadow:0 0 20px 3px #dfe9f7;border:1px solid #eaeaea;z-index:2;box-shadow:0 0 20px 3px #dfe9f7;border:1px solid #eaeaea;z-index:2;border:1px dashed #39c}.entry-more a{position:absolute;width:82px;rightright:-80px;webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s;opacity:0}
  4. .post:hover .entry-more a{rightright:0;opacity:.7}

 

具体效果,如下图所示:第一篇文章,鼠标经过,【阅读全文】的按钮自动滑出显示。第二篇,鼠标没经过,默认隐藏。

Begin 主题[阅读全文]按钮更改为鼠标经过滑出显示

具体效果可查看本站分类目录下的页面。全文完。

 

weinxin
博客小程序【一起行动派】
欢迎访问行动派博客小程序,小程序和博客同步更新,查看内容更加方便!
Action

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:5   其中:访客  3   博主  2

    • avatar 贵安服务 1

      不错不错,感谢博主的分享

        • avatar 简单梁 Admin

          @贵安服务 谢谢,欢迎来访!

        • avatar 很文博客 2

          这主题真心不错,对搜索引擎也很友好!

            • avatar Action Admin

              @很文博客 嗯嗯,这个主题挺多人用的。

            • avatar 范德萨范德萨 1

              哥,你用的是begin主题吗?wordpess怎么找不到