Question

I am trying to create a rollover effect with jQUery. I have similar things, however because I am trying to do a mouseover with a an object that has a link in it I am having problems.

I have a level-2 nav bar. The placeholder’s are table cells (bad I know – but it’s already done this way). I want to change the background from white (#FFF) to dark grey (#999). I also want to change the text from dark grey to white.

Since the text is a link, I have to specify a class within the link tag to ensure that it is dark grey without an underline and doesn’t default to the blue, underlined text.

The code I have written causes all the links of class=”subLink” to change to being white from grey when anyone of them is “hovered over”. I only want this to happen for the particular item in question – that is the background should become grey and the link should become white.

HTML and jQuery are below:-

<td class="subMenuTD"><a href="newsletter.html" class="subLink">Newsletter</a></td>
<td class="subMenuTD"><a href="news_archive.html" class="subLink">News Archive</a></td>
<td class="subMenuTD"><a href="events.html">Events</a></td>

---

$(".subMenuTD").hover(
                  function() { 
                     $(this).addClass("subMenuTDActive");
                     $(".subLink").addClass("subLink-white");
                  },
                  function() {      
                     $(this).removeClass("subMenuTDActive");
                     $(".subLink").removeClass("subLink-white");
          }
               );

Answer 1

Add a context parameter to the $() function.

$(".subLink") –> $(".subLink", this) will make jQuery only match “.subLink”s that are children of the given context element.