鼠标移动显示和隐藏评论者运营商等信息

2020年4月27日09:52:36 发表评论 410 次浏览

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

鼠标移动显示和隐藏评论者运营商等信息

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

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

  1. /*评论者运营商信息鼠标移动显示和隐藏*/
  2. .WB-OS img {
  3.    width14px;
  4.    heightauto;
  5.    vertical-align: -6%;
  6. }
  7. .flags {
  8.    displaynone;
  9. }
  10. @media screen and (min-width900px) {
  11.    .comment-body:hover .flags {
  12.      displayinline;
  13.       animation: fade-in;
  14.       animation-duration: 0.3s;
  15.       -webkit-animation: fade-in 0.3s;
  16.    }
  17. }

效果可以留言查看。

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

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

如需鼠标经过时显示或隐藏以上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. }
weinxin
小Q年
关注公众号,获取前沿分享
smallQ

发表评论

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