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

avatar
avatar
loveatj
82
文章
12
评论
2018年9月28日22:24:13 评论 203

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
我的微信公众号(YoungDoctor)
微信扫一扫
匿名

发表评论

匿名网友 填写信息

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