I thought I’d share a technique that I have grown very fond of over the last year - all made possible by jQuery’s syntactic bliss.

On many occassions in the past, I have found myself writing roll-over code that looks something like this:

<ul class="navigation">
  <li onmouseover="this.className='selected';" onmouseout="this.className='';" class="selected"><a href="#">Link 1</a></li>
  <li onmouseover="this.className='selected';" onmouseout="this.className='';"><a href="#">Link 2</a></li>
  <li onmouseover="this.className='selected';" onmouseout="this.className='';"><a href="#">Link 3</a></li>
</ul>

As you can see, the onmouseover/onmouseout makes the code less readable and takes up a lot of unnecessary space. One way to get rid of it is obviously to take advantage of the :hover pseudo class on the a element but if you want the hovered item to be the only item marked with the selected class then obviously that solution doesn’t cut it.

jQuery’s event wiring, along with its selector syntax allows you to remove the onmouse**** tags and earn some well deserved HTML karma.

JS

$lastActiveItem = null;
jQuery(document).ready(function(){
	$('.navigation li').mouseover(function(){
		$lastActiveItem = $('.navigation li.selected');
		$('.navigation li').removeClass('selected');
		$(this).addClass('selected');
	});

	$('.navigation li').mouseout(function(){
		$('.navigation li').removeClass('selected')
		$lastActiveItem.addClass('selected')
	});
});

This entry was posted on Friday, May 22nd, 2009 at 1:09 pm and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.