[jQuery] Re: Hover Effect on 2 rows

This one did the trick - thanks !

On Jan 26, 5:29 am, jQuery Lover <ilovejqu...@gmail.com> wrote:
> Hi Kevin,
>
> NO, you can not wrap your tr's with div's or span's.
>
> Unfortunately Olaf's script will not work also.
>
> A little ugly script should do the job:
>
> $(function(){
>         $('.Row').hover(function(){
>                 $(this).addClass('hover');
>                 getNeighbor(this, 'Row').addClass('hover');
>         },
>         function(){
>                 $(this).removeClass('hover');
>                 getNeighbor(this, 'Row').removeClass('hover');
>         })
>         $('.AltRow').hover(function(){
>                 $(this).addClass('hover');
>                 getNeighbor(this, 'AltRow').addClass('hover');
>         },
>         function(){
>                 $(this).removeClass('hover');
>                 getNeighbor(this, 'AltRow').removeClass('hover');
>         })
>
> });
>
> function getNeighbor(el, cls){
>         if($(el).prev().hasClass(cls))
>                 return $(el).prev();
>         if($(el).next().hasClass(cls))
>                 return $(el).next();
>
> }
>
> ----
> Read jQuery HowTo Resource  -  http://jquery-howto.blogspot.com
>
> On Mon, Jan 26, 2009 at 5:45 AM, kevind <kevint...@gmail.com> wrote:
>
> > hi,
>
> > i'm using JQuery to add a Class when a row is hovered over - i have it
> > working, however, each row of data has 2 rows in the table - I want to
> > have both rows change background color whenever i hover over either of
> > them.  The table already has 'stripes' for alternating records and
> > readability.
>
> > I'm using function:
> > =================
> > $(function(){
> >  $('.Row').hover(function(){
> >    $(this).addClass('hover');
> >  },
> >  function(){
> >    $(this).removeClass('hover');
> >  })
> >  $('.AltRow').hover(function(){
> >    $(this).addClass('hover');
> >  },
> >  function(){
> >    $(this).removeClass('hover');
> >  })
> > =================
>
> > the table structure looks like this:
> >     <table class="Grid" cellspacing="0" cellpadding="0">
> >        <tr class="Caption">
> >          <th>Comment</th>
> >          <th>Created</th>
> >        </tr>
> >        <tr class="Row">
> >                  <td>&nbsp;</td>
> >          <td>&nbsp;</td>
> >        </tr>
> >         <tr class="Row">
> >          <td>&nbsp;</td>
> >          <td>&nbsp;</td>
> >        </tr>
>
> >        <!-- -->
> >        <tr class="AltRow">
> >          <td>&nbsp;</td>
> >          <td>&nbsp;</td>
> >        </tr>
> >         <tr class="AltRow">
> >          <td>&nbsp;</td>
> >          <td>&nbsp;</td>
> >        </tr>
> >    </table>
> > ==================
> > the individual rows highlight using STYLE of  '  tr.hover td
> > {background:yellow;}  '
>
> > how do get the 2 TR's to highlight together at the same time when i
> > float over the class 'Row' ?  Do i surround them with DIVs or SPAN?
> > Is this possible to group 2 table rows inside another element and get
> > the function to fire for both.
>
> > thanks in advance for any help