WordPress-Style Comment Controls Using MooTools or jQuery

WordPress has a nice little effect on the Admin Dashboard where it shows and hides the comment control links when you mouseover and mouseout of the record's container. Here's how to achieve that effect using MooTools or jQuery.

The XHTML

<!-- more records above -->
<div class="record">
	<p>
		<strong>Comment Person 2</strong><br />
		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
	</p>
	<div class="record-controls">
		<a href="#" class="unapprove">Unapprove</a> |
		<a href="#">Edit</a> |
		<a href="#">Reply</a> |
		<a href="#">Spam</a> |
		<a href="#" class="delete">Delete</a>
	</div>
</div>
<div class="record">
	<p>
		<strong>Comment Person 3</strong><br />
		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
	</p>
	<div class="record-controls">
		<a href="#" class="unapprove">Unapprove</a> |
		<a href="#">Edit</a> |
		<a href="#">Reply</a> |
		<a href="#">Spam</a> |
		<a href="#" class="delete">Delete</a>
	</div>
</div>
<!-- more records below -->

Notice that we place the links into the pageand DO NOT inject them using MooTools or jQuery. Why? So that if the user doesn't have JavaScript enabled, they can still see the links.

The CSS

.record				{ width:700px; border:1px solid #ccc; padding:15px; margin:0 0 15px 0; }
.record:hover		{ background:#eee; }
.record-controls	{ font-size:10px; }
.unapprove			{ color:#d98500; }
.delete				{ color:#bc0b0b; }

You may modify the above CSS any way you'd like.

The MooTools JavaScript

/* when the dom is ready... */
window.addEvent('domready',function() {
	/* hide all controls right away */
	$$('div.record-controls').setStyle('visibility','hidden');
	/* add events for show/hide */
	$$('div.record').each(function(rec) {
		var controls = rec.getFirst('div.record-controls');
		rec.addEvents({
			mouseenter: function() { controls.fade('in') },
			mouseleave: function() { controls.fade('out') }
		});
	});
});

Once the DOM is ready, we hide all controls and direct MooTools to show and hide the record controls on the mouseover and mouseout events.

The jQuery JavaScript

/* when the dom is ready... */
$(document).ready(function(){
	/* hide all controls right away */
	$('div.record-controls').css('visibility','hidden');
	/* add events for show/hide */
	$('div.record').each(function() {
		var controls = $(this).children('div.record-controls');
		$(this).hover(
			function() { $(controls).css('visibility','visible') },
			function() { $(controls).css('visibility','hidden') }
		);
	});
});

The above achieves a similar effect using jQuery.

I like hiding these links by default because the link colors can be distracting. What do you think?