Implementation of mouse hover to show and hide comments and quote buttons in WordPress

Show, hide, reply and quote buttons based on mouse hover
Ideas and principles
The principle is very simple. If you have read one or two or more pages of Jquery manual,
Then you will definitely understand the following principle explanation, otherwise please skip to the code implementation area to read.
The idea is very simple.

Place the reply and reference buttons where you want, CSS style settings display:none;
Bind the hover action in Jquery to the area where you want the button to be displayed after the mouse hover
Isn't it very simple? If I had written a blog before, it would have ended here.
Well, since you teach mermaids, then continue....

The code implementation part of the special effect
Reply and quoted HTML code

   .comment-act{display:none;}
Jquery（ Javascript ） Code section
Note： It's the area where every comment I'm talking about
   $('').hover(//Note 1 function(){
 $(this).find('-act').fadeIn(400);
 },
 function(){
 $(this).find('-act').fadeOut(400);
 });

Enhancement and advanced extension of special effects code
The production of Jquery special effects often encounters such a situation.
There are some extreme users who will constantly switch back and forth in two areas with hover animation effects (to do testing?),
Because our special effects display generally sets a display time, here we set 400 milliseconds.
It is obvious that the user's mouse switches back and forth only takes about 100 milliseconds, or even less.
Constantly switching back and forth will often generate an animation queue, even if your mouse stops moving.
The special effects will also keep hiding and displaying according to the actions that have occurred before your mouse until the last mouse action is responded to.
Although this is not very common, if we have a lot of comments,
And the visitors keep sliding the mouse up and down to check the content. Is this easy to happen?
Isn't it annoying?
Not only is it annoying, it will also increase the load of the client browser, affect the website efficiency, and is even worse for the user experience.
The problem is actually very simple. Use the hover callback function parameter to terminate the animation queue.

   $('').hover(//Note 1 function(){
 $(this).find('-act').fadeIn(400);
 },
 function(){
 $(this).find('-act').fadeOut(400,function(){$(this).stop(true);});
 });

Because when we move out of the mouse, we want to stop all animation displays.
So we terminate the animation queue in this area after the mouse is moved out of the hidden reply and quote button.
In fact, MG12's blog has not dealt with this situation so far (lazy? Isn't it necessary?).
You can compare his blog, haha!
Note 1: hover is a method that mimics hover events (move the mouse to an object and moves out of this object). This is a custom method.
It provides a state of "stay in it" for frequently used tasks.
When the mouse moves over a matching element, the specified first function is triggered. When the mouse moves out this element, the specified second function is triggered.

Show and hide commenter information
This feature has many themes, aiming to reduce page size and improve user experience. My theme originally reserved this feature, but because I am lazy, I have not modified it. Recently, I’ve been lazy and I’ve been lazy, so I haven’t been bothering with my blog. I feel that if I don’t bother with my blog, I might be so idle.

Look for the master to point it out
The JS code is as follows:

 var cmtinfo = jQuery('#cmtinfo');
if (>0){
var hideinfo = ('#hide_author_info');
var showinfo = ('#show_author_info');
var authorinfo = jQuery('#author_info');
();
(function(){jQuery(this).fadeOut(function(){();});();});
(function(){jQuery(this).fadeOut(function(){();});();});
}

#cmtinfo is a new DIV for the visitors that have information displayed.
#hide_author_info, #show_author_info One is to hide the button and the other is to show the button
#author_info is a sub-DIV of #cmtinfo