Question

I have a simple nav made up of the following HTML;

<div class="inner">
<div class="button"><img class="portal" src="images/portalbutton.png" /></div>
<a href="#"><div class="prod_description">&nbsp;</div></a>
</div>

There are a number of items (All set to float left along side each other) to make up a nav bar.

When I hover over .button and/or .prod_description I want the .inner <div> to have the class .hover added to it. This is so I can set a background image around the whole thing (Kind of like highlighting the nav item).

I only then want to remove .hover when another .button or .prod_description is hovered over, in which case this nav item takes the .hover class.

Answer 1

When I hover over .button and/or .prod_description I want the .inner <div> to have the class .hover added to it.

Unless your CSS is positioning things in a very clever way, this would be the same as hovering the .inner itself, right? If so, the task can be solves as easy as:

$('.inner').hover(function() {
    $('.inner').removeClass('hover');
    $(this).addClass('hover');
});

If my assumption about the positioning doesn’t hold, the code will have to look more like this:

$('.inner .button, .inner .prod_description').hover(function() {
    $('.inner').removeClass('hover');
    $(this).parents('.inner').addClass('hover');
});

In the latter code sample, notice the use of parents() – not to be confused with parent().