Остановить наведение/перемещение CSS на родительском элементе

Question

Я не уверен, как выразить это, если честно.

У меня есть панель навигации, которая обнажает подменю при наведении указателя мыши позволяет говорить

#navigation:hover #submenu {visibility: visible} 

в подменю У меня есть кнопка закрытия, которую я когда щелкнул должен прекратить парение на навигационном элементе. Но не удаляйте его для будущих зависаний.

Как мне решить эту проблему?

Answer 1

Использование :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; 
} 

Working Fiddle

PS: Я взаимозаменяемые позиции ul и #fubar элементов, чтобы получить желаемое решение, используя прилегающий селектор родственного.

Answer 2

В этом случае явным является ответ. hover и toggleFade полезные ярлыки вещей, но когда вам нужно сделать что-то более сложное (например, имеет ручное вмешательство в hover или fade обработке), то вы лучше, используя явную, расширенную форму, например: 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(); 
}) 

Я явно говорил на мыши войти, увядает СЧА в и на отпуск мыши, исчезают СЧА из и в случае нажатия на кнопку закрытия, я явно говорил , когда я clicick #grapes, принудительно выцветает навигация.

Answer 3

я сделать что-то вроде этого

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

Где $ hoveredContainer является переменной, содержащей элемент JQuery, который в настоящее время завис.

Что делает этот код, является «неотъемлемым» элементом в течение секунды.

Он работает для выпадающих списков, когда мышь находится над расширенной областью, в которой производится выбор.