Question

I’ve got a simple menubar, seen here. My issue is that when you hover over the tabs, and the sub-menu slides down, and then you hover over the slide menu, the tab goes off of its hover state.

Here’s my jQuery:

$('.js-tab').hover(function(){
    $(this).css('background-color', 'black').css('color', 'white').children('.js-icon').css('background-position', '0px -65px');
},function(){
    $(this).css('background-color', 'white').css('color', 'black').children('.js-icon').css('background-position', '0 0');
});

$('nav').hover(function(){
    $('.js-subitems').slideDown(150);
},function(){
    $('.js-subitems').slideUp(200);
});

.js-tab(s) are all the tabs. On hover, their css changes to invert the color, and select an inverted part of the sprite. ‘nav’ is the entire menu. Its size is dictated by the elements within it, it has no specific styling, I’m selecting it instead the tabs for the sub-menu so the sub-menu will stay up when you hover over it.

Here’s my CSS:

.js-subitems {
    background: rgba(0,0,0,.8);
    width: 539px;
    height: 170px;
    margin: 0 0 0 313px;
    border: 1px solid rgba(255,255,255,.5);
    border-top: 0px solid transparent;
    border-right: 1px solid rgba(0,0,0,.8);
    position: absolute;
    display: none;
    z-index: 7;
    padding: 15px;
    padding-top: 185px;
    color: white;
}

.js-icon{
    background-color:transparent;
    background-position:top left;
    background-repeat:no-repeat;
    position:absolute
}

.js-menu{
    float:left;
    width:570px;
    height: 340px;
    position:relative;
    margin-left:313px;
    border-left: 1px solid #CCC;
    z-index:10
}

.js-menu li{
    float:left;
    border-right:1px solid #CCC
}

.js-tab{
    background:#fff;
    display:block;
    overflow:hidden;
    position:relative;
    text-align:center;
    width:94px;
    height:170px;
    text-decoration:none;
    z-index:8
}

.js-tab h2{
    font-size:13px;
    font-weight:500;
    left:0;
    position:absolute;
    top:120px;
    width:97px;
    text-decoration:none
}

NOTE: Although the background color can be changed without use of javascript, I’m trying to keep all of it in the same place. I’ll slim this down later, compression is not important at the moment.

What I need, is a to add some jQuery so that when you move your cursor from the tab onto that sub-menu, the tab you had moved from stays selected. Then, when you hover from that sub-menu, back onto a tab in the menubar, tat tab becomes selected.

Answer 1

I think binding the hover event to only the li should work:

$('#js-menu li).hover(function(){
    $(this).find('.js-tab').css('background-color', 'black').css('color', 'white').children('.js-icon').css('background-position', '0px -65px');
    $(this).find('.js-subitems').slideDown(150);
},function(){
    $(this).find('.js-tab').css('background-color', 'white').css('color', 'black').children('.js-icon').css('background-position', '0 0');
    $(this).find('.js-subitems').slideUp(200);
});

That will trigger both changes that you need. However, I would also put each sub item list within the li as well, like this:

<li data-hovercolor="#fff">
    <a href="/" class="js-tab">
    <h2 data-type="mText" class="js-item">Home</h2>
    <span data-type="icon" class="js-icon js-icon-home"></span>
    </a>
    <div class="js-subitems">
        Testing the text.
    </div>
</li>

This way, since the sub items are part of the parent li, the parent li will keep the hover effect on when mousing over the sub items.

EDIT: After some discussion, a new solution was needed. I am pretty sure this should be working for what you need: http://jsfiddle.net/jackrugile/SkhqF/

It changes the duration based on whether the ul is being hovered over or not, and applies a small setTimeout to handle the animation when leaving the ul. Thanks to @GregL’s answer for inspiration.