Display Comment Author Url on Hover

This is a simple trick, not really useful. But you can use it if you like it. If you have ever noticed in Web Designer Wall’s comment section. Whenever you hover (put mouse over) on any comment author name, It shows the author url with an arrow next to it. Its possible through CSS, but older browsers like IE6 doesn’t support it. So here I’m sharing how can we do this with simple jQuery.

Just add following code in functions.php of your theme.

$(document).ready(function() {
 $(".author a").hover(function() {
 $(this).next("span").css({ display: "inline"});
 }, function() {
 $(this).next("span").css({ display: "none"});
 });
 });

Add this code to your stylelsheet for CSS.

.author span.hidden {
 display:none;
 font-size:small;
} ;

Replace Comment Author Name code with

<div class="author">
<a class="url" rel="external nofollow" href="http://www.WPPanda.com">WPPanda</a><span class="hidden">&#8594; http://www.WPPanda.com</span>
</div>;

The above code is hiding some part from line no 2. Select all to copy the hidden code, sorry!