I have a simple table generated by an ASP.NET MVC view and needed to switch out CSS classes as the user hovered over rows.  Initially I used the rather obvious “hover” feature built-into jQuery since it provides a way to write code that’s called as the user enters and leaves an object.  I ended up doing something like this:

$(this).closest('tr').hover(
    function()
    {
        $(this).addClass('Over');
    },
    function()
    {
        $(this).removeClass('Over');
});

While this works, I was looking into another scenario today and realized that it’s much easier to do the toggle effect using the jQuery bind() function combined with toggleClass().  Either way works, but I’m all for less code where possible.  Here’s how to achieve the same “hover” effect with less code:

$(this).closest('tr').bind("mouseenter mouseleave", function(e)
{
    $(this).toggleClass("Over");
});

The toggleClass() function automatically handles adding and removing the Over CSS class and the bind() function handles attaching to the mouseenter and mouseleave events.  Nice and clean…

For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com/.