WordPress评论者UA鼠标移过显示和隐藏

 2017年07月09日 09:45  1,599  3  打印本文  

实现这个效果之前,首先要有评论者UA,怎么显示评论者UA,九哥就不赘述了,很多博客都有教程,今天主要介绍如何实现鼠标移过评论框显示和隐藏评论者UA。

学过js的小伙伴,应该会觉得很简单,实现方法也很多,在这里九哥分享下自己使用的方法。

1.添加js代码实现显示和隐藏

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>

注:comment-body是评论框的class名,ua-info是运营商信息的class名。

很多教程默认评论者UA是一直显示的,添加以上代码后会出现鼠标放上去评论者UA隐藏,移开显示,这和我们想要的效果正好反了。

2.想要调整过来其实也不难。

方法一:找到下面这段代码:

  1. <span class="ua-info">
  2.    <?php
  3.          CID_print_comment_flag();/*国籍*/
  4.          echo ' ';/*空格*/
  5.          CID_print_comment_browser();/*浏览器*/
  6.          echo convertip(get_comment_author_ip());/*运营商*/
  7.    ?>
  8. </span>

在<span  class="ua-info">中添加style="display:none"

即<span  class="ua-info" style="display:none">

如果你的代码不是这样的,可以复制以上代码覆盖即可。

方法二:在style.css文件中添加以下代码:

  1. .ua-info {
  2.     display: none;
  3. }

以上两种方法都能完美实现鼠标移过评论框显示UA信息,移开隐藏。

效果可以查看九哥博客评论。

      提示:代码不要用记事本改,会出错的。

相关推荐:

历史上的今天:

weinxin
99八十一微信公众号
扫一扫关注99八十一微信公众号,打开微信简简单单即可查看99八十一所有内容,更快捷更方便。
九哥

吐槽一下

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

目前吐槽:3   其中:访客  2   博主  1

    • avatar voice站点 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信 【小白】

      亲测可用,十分感谢

      • avatar NVZA 来自天朝的朋友 QQ浏览器  HM 2A Build/KTU84Q 广东省广州市天河区 电信 【小白】

        亲测可用,very good