Stop hovering / moving CSS on parent element
I'm not sure how to express this to be honest.
I have a navigation bar that pops up a submenu on hover lets say
#navigation:hover #submenu {visibility: visible}
in the submenu, I have a close button that I click to stop hovering on a nav. But don't delete it for future freezes.
How can I solve this problem?
source to share
Use a selector :active
.
#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;
}
PS: I have changed the positions of the elements ul
and #fubar
to get the desired solution using the adjacent selector.
source to share
In this case, the answer is obvious. hover
and toggleFade
are useful shortcuts for things, but when you need to do something more complex (like manual manipulation of processing hover
or fade
) you are better off using an explicit extended form like: 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 speak directly about mouse input, the navigation in the "go away" and "go away" mode fades out, the navigation fades away, and if the "close" button is pressed, I directly say, when I clicick #grapes, the navigation fades away.
source to share
I am doing 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 hovered.
What this code does is "unhover" an element for a second.
It works for dropdowns when the mouse is over the extended area where the selection is made.
source to share