CODEWITHSUNDEEP
jquerycss
user1043646
user1043646

Reputation:

Stop CSS hover / unhover on parent element

I'm not sure how to phrase this to be honest.

I have a navigation bar which exposes sub menus when hovered lets say

#navigation:hover #submenu {visibility: visible}

within the submenu I have a close button which I when clicked should stop the hover on the navigation element. But not remove it for future hovers.

How would I get around this problem ?

Upvotes: 3

Views: 2427

Answers (3)

braks
braks

Reputation: 1600

I do something like this

    $hoveredContainer.css('pointer-events', 'none');
    setTimeout(function () {
        $hoveredContainer.css('pointer-events', 'auto')
    }, 10);

Where $hoveredContainer is a variable containing the jQuery element that is being hovered.

What that code does is "unhover" the element for a split second.

It works for drop downs when the mouse is over the 'expanded' area where the selection is being made.

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

Use :active selector. 

#test:hover #grapes {
    display: block;
}
#grapes {
    display: none;
    border: 1px solid black;
    padding-bottom: 2em;
    position: relative;
}
#fubar {
    position: absolute;
    bottom: 0px;
}
#fubar:active + ul {
    display: none;
}

Working Fiddle

PS: I interchanged the ul and #fubar elements' positions to get desired solution using adjacent sibling selector.

Upvotes: 1

Eli Gassert
Eli Gassert

Reputation: 9763

In this case, being explicit is the answer. hover and toggleFade are useful shortcuts to things, but when you need to do something more complex (like have a manual intervention in the hover or fade handling) then you're better using an explicit, expanded form, like this: http://jsfiddle.net/v8jroxvx/1/

$('#test').on('mouseenter', function(){
    $('#grapes').stop(true, true).fadeIn();
}).on('mouseleave', function() { $('#grapes').stop(true, true).fadeOut(); })

$('#fubar').click(function()
{
    $('#grapes').fadeOut();
})

I am explicitly saying on mouse enter, fade the nav in and on mouse leave, fade the nav out and in the case of clicking the close button, I am explicitly saying when I clicick #grapes, forcefully fade the nav out.

Upvotes: 0

Related Questions