鼠标移动显示和隐藏评论者运营商等信息 —— WordPress美化教程

2017年8月25日14:36:14 55 17,098

之前仙踪小栈刚刚发布了添加评论者操作系统、浏览器和运营商信息——WordPress美化教程,但是在逛某些博客时发现,那个评论者操作系统、运营商等信息默认是隐藏,鼠标移上去显示,移开隐藏,感觉特别好玩,特分享教程供大家参考。

 

鼠标移动显示和隐藏评论者运营商等信息 —— WordPress美化教程

 

方法一:(对应添加教程的方法一)

将下面配套样式文件添加到主题样式文件style.css最后,或者主题选项→定制风格→自定义样式中:

此处为隐藏的内容!
发表评论并刷新,方可查看

 

效果可以留言查看。

 

鼠标移动显示和隐藏评论者运营商等信息 —— WordPress美化教程

 

注:添加样式后鼠标悬停在留言上才会显示留言者相关信息,小屏手机上不显示,因为留言者所在区域信息内容较长,不好看,而且可能会造成错位。

 

方法二:(对应添加教程里的方法二)

如需鼠标经过时显示或隐藏以上UA信息和IP地址,则在对应主题footer.php中添加代码:

  1. <script>
  2.     jQuery(function(){
  3.         $(".comment-body").hover(function(){
  4.             $(this).find(".ua-info").toggle();
  5.         },function(){
  6.             $(this).find(".ua-info").toggle();
  7.         });
  8.     });
  9. </script>

 

如果显示和隐藏效果相反,则在在对应主题style.css文件内或自定义CSS处,加以下css代码调整

  1. .ua-info {
  2.  display:none;/*设置隐藏*/
  3.   margin-left:8px;
  4. }

 

 

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!

发表评论

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

目前评论:55   其中:访客  0   博主  0

    • 三四十 三四十 1 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信

      嗯嗯嗯

      • 123 123 4 来自天朝的朋友 QQ浏览器 Windows 8.1 湖北省武汉市 联通

        • 原野 原野 2 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省杭州市 电信

          谢谢分享666666666666666666666

          • 1156646905 1156646905 4 来自天朝的朋友 搜狗浏览器 Windows 7 江苏省苏州市 电信

            嗯嗯嗯

            • shdder shdder 3 来自天朝的朋友 谷歌浏览器 Windows 10 天津市 腾讯公司联通数据中心节点

              学习学习

              • 王小优 王小优 4 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省株洲市 电信

                路过学习

                • 可以可以 可以可以 1 来自天朝的朋友 谷歌浏览器 Windows 7 贵州省黔东南州 联通

                  看看看看

                  • 锟斤拷锟斤拷 锟斤拷锟斤拷 0 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省温州市 电信

                    如果是不隐藏 评论者这些信息,需要修改哪些地方呢

                    • BruceWong BruceWong 1 来自天朝的朋友 谷歌浏览器 Mac OS X Lion 10_15_7 上海市 电信

                      学习一下

                      • 王小优 王小优 1 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省株洲市 电信

                        学习

                        • 78tnnd 78tnnd 2 来自天朝的朋友 谷歌浏览器 Windows 10 山东省潍坊市 移动

                          感谢

                          • 7815646 7815646 2 来自天朝的朋友 谷歌浏览器 Windows 10 山东省潍坊市 移动

                            感谢