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

 2017年07月09日 09:45  3,332  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
小算草微信公众号
扫一扫关注小算草微信公众号，打开微信简简单单即可查看小算草所有内容，更快捷更方便。
Mr Y

吐槽一下

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

    • avatar voice站点 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信 【小白】
      回复 2018年10月17日 21:40

      亲测可用，十分感谢

      • avatar NVZA 来自天朝的朋友 QQ浏览器 HM 2A Build/KTU84Q 广东省广州市天河区 电信 【小白】
        回复 2017年7月9日 09:53

        亲测可用，very good