Thursday, October 2, 2008

[jQuery] Re: hover question

$('tbody tr').hover(function () {
   $(this).addClass('hovered');
 }, function () {
   $(this).removeClass('hovered');
 });


On Thu, Oct 2, 2008 at 14:46, Brad <NrmlCrptRdr@gmail.com> wrote:

This isn't so much about hover, but about the selectors I've had to
use within its 'over' and 'out' functions.

Consider the following. I'm working on a project where I'll have to
repeat this pattern often.
I'll hover over a table's tbody, but will need to affect rows or even
specific row cells within that tbody.

// This will highlight a tbody's rows on mouseEnter.
// The original row coloring will be restored on mouseLeave.
// A tbody may have numerous rows.

 tbody.hover(function () {
   $(this).children('tr').addClass('hovered');
 }, function () {
   $(this).children('tr').removeClass('hovered');
 });

In the above I had to repeatedly specify

   $(this).children('tr')

Is there a shorthand way to only specify it once in the over function
and refer to that in the out?

Similar patterns would apply to toggle, etc.

Thanks!


No comments: