Question

I’m trying to create a navigation menu which would change parent div background when hover on child li item. Actually, I just want to move the parent background.

Here’s my code:

<div id="headerNav">
    <li class="navHome"><a href="index.php">Home</a></li>
    <li class="navServices"><a href="services.php">Services</a></li>
    <li class="navFaq"><a href="faq.php">FAQ</a></li>
    <li class="navGallery"><a href="gallery.php">Gallery</a></li>
    <li class="navContact"><a href="contact-us.php">Contact</a></li>
</div>

So, I have the #headerNav showing default background. When you hover over Services, I want move #headerNav background image 75px up. When you hover over FAQ, I want to move #headerNav background image 150px up, etc.

Can anyone help me?

Answer 1

Consider that li elements are list items, so its parent should be e.g. ul tag but not div. If we imagine valid HTML markup, you can use something like follows to operate background-position of the parent element. I used index() method for not hardcoding the logic.

$("#headerNav > li").hover(function() {
    var pos = "0 -" + ($(this).index() * 75) + "px";
    $(this).parent().css("background-position", pos);
}, function() {
    $(this).parent().css("background-position", "0 0");
});

DEMO: http://jsfiddle.net/rFhtP/