Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
112
rated 0 times [  116] [ 4]  / answers: 1 / hits: 15504  / 16 Years ago, thu, march 5, 2009, 12:00:00

I am trying to make a navigation that uses simple unordered lists to list all the links. Basic stuff. However the first LI element has a class name of section-title. following this 'section-title' are the links to the other pages.



Now i would like to change the background color of the li.section-title to black while hovering over one of the links of that section (the LI elements beneath the section-title).



The issue being that I have more than 1 UL LI.section-title in my navigation so the direct method (which worked) was using:



$(document).ready(function() {

$('#navigation ul li a').hover(
function() {
$('#navigation ul li.section-title').animate( {
backgroundColor: #000,
color: #F9B60F
}, fast );
},
function() {
$('#navigation ul li.section-title').animate( {
backgroundColor: #FFF,
color: #000000,
}, fast );
}
);

});


but it would simultaneously change the color of ALL li.section-title elements of the page.



Currently i'm trying to use (this).parent to get only the li.section-title of the group that includes the currently hovered over li element but this does not work at all for some reason.
Maybe it's the theory behind it that's wrong or my code.



This is my current code (which does not work):



$(document).ready(function() {

$('#navigation ul li a').hover(
function() {
$(this).parents(.section-title).animate( {
backgroundColor: #000,
color: #F9B60F
}, fast );
},
function() {
$(this).parents(.section-title).animate( {
backgroundColor: #FFF,
color: #000000,
}, fast );
}
);

});


I'm pretty new to jQuery and have searched a lot of documentation of this type of thing online but simply couldn't figure it out.



Maybe you can.
The website in question can be found (including the broken script) at:
www.jannisgundermann.com



Note though that the 'nudging' and colour change of the li items is done by another script not related to this one.



Thanks for reading.
Jannis


More From » jquery

 Answers
0

You're not properly targeting the li you want. Try this:



$('#navigation ul li a').hover(
function() {
$(this).parents('ul').find('li.section-title').animate( {
backgroundColor: #000,
color: #F9B60F
}, fast );
},
function() {
$(this).parents('ul').find('li.section-title').animate( {
backgroundColor: #FFF,
color: #000000,
}, fast );
}
);


You have to find the parent ul first, and then find the element within that ul that you want to highlight.


[#99887] Friday, February 27, 2009, 16 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
wyattkennyc

Total Points: 650
Total Questions: 102
Total Answers: 90

Location: Monaco
Member since Mon, May 23, 2022
2 Years ago
;