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
