CODEWITHSUNDEEP
javascriptcss
Corey Watson
Corey Watson

Reputation: 11

jQuery Add / Remove class to non-sibling DIV ID?

I am relatively new to Javascript, and I am having issues with the following script:

// Keep Focus On Site Menu //
function menuFocus() {
    $('#menu').addClass('hover');
}

function menuBlur() {
    $('#menu').removeClass('hover');
}

$(document).ready(function() {
    $('#submenu-mgmt').hover(menuFocus,menuBlur);
});

$(document).ready(function() {
    $('#submenu-label').hover(menuFocus,menuBlur);
});

Essentially, I am trying to keep a 'hover' effect on a non-sibling DIV ID while a user is hovered over a secondary menu system using two separate DIV IDs. I designed it to include 3 DIV IDs, '#Menu' is the header menu area. '#Submenu-Mgmt' and '#Submenu-Label' are both hidden on arrival but can be opened by clicking a link that shows / hides the DIVs.

This is a for a page that is currently live -- and while this issue won't make or break the site, it would be a nice touch as the menu area loses focus while a user's mouse is hovered over the submenus.

Page in question: http://www.parkthevan.com/index.php.

Upvotes: 0

Views: 152

Answers (1)

AE Grey
AE Grey

Reputation: 368

Adding the additional submenu IDs to the add class function should do it. If your hover class has additional display qualities other than to hide/show the class, you could use the .css as well. I'll include them both here for you. :) (note the // is a comment in javascript) You'll Also want to do the same for the remove - and you only need your document ready once.

    function menuFocus() {
       $('#menu, #submenu-mgmt, #submenu-label').addClass('hover');
       // or
       //$('#submenu-mgmt, #submenu-label').css('display', 'block');
    }

    function menuBlur() {
       $('#menu, #submenu-mgmt, #submenu-label').removeClass('hover');
       // or
       //$('#submenu-mgmt, #submenu-label').css('display', 'none');
    }

    $(document).ready(function() {
       $('#submenu-mgmt').hover(menuFocus,menuBlur);
       $('#submenu-label').hover(menuFocus,menuBlur);
    });

Upvotes: 1

Related Questions