Stop CSS hover / unhover on parent element

Question

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 ?

for manage this type of interaction you should manage via javascript. if you post a fiddle is easier understand the structure. — cesare
– cesare, Commented Dec 22, 2014 at 16:24
Here is a fiddle of what I am trying to achieve. jsfiddle.net/v8jroxvx sorry for the vague nature of the question, I'm not very sure on the jargon to use x — user1043646
– user1043646, Commented Dec 22, 2014 at 16:25
So are you trying to achieve: Upon hovering the navigation bar, the links are displayed, when your mouse leaves the navigation the navigation is still visible however, clicking close. Closes it? — pourmesomecode
– pourmesomecode, Commented Dec 22, 2014 at 16:35

Mr_Green · Accepted Answer · 2014-12-22 16:58:18Z

1

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.

edited Dec 22, 2014 at 16:58

answered Dec 22, 2014 at 16:44

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

enguerranws Over a year ago

Interesting, what about compatibility ? Is this working great in IE 8-9 ?

Mr_Green Over a year ago

@enguerranws yup.. should work as I am not using css3 here. :)

enguerranws Over a year ago

Yes but IE and some others don't trigger / understand :active pseudo-class on all html elements.

Mr_Green Over a year ago

@enguerranws works fine for IE8+ MDN Link

Eli Gassert · Accepted Answer · 2014-12-22 16:30:44Z

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.

braks · Accepted Answer · 2016-03-18 05:45:11Z

0

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.

answered Mar 18, 2016 at 5:45

braks

1,62818 silver badges25 bronze badges

Collectives™ on Stack Overflow

Stop CSS hover / unhover on parent element

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related