说实话,我不确定如何表达这个问题。
我有一个导航栏,当鼠标悬停时,会显示子菜单。
#navigation:hover #submenu {visibility: visible}
在子菜单中,我有一个关闭按钮,当点击它时,应该停止导航元素的悬停效果。但不能删除未来的悬停效果。
如何解决这个问题?
说实话,我不确定如何表达这个问题。
我有一个导航栏,当鼠标悬停时,会显示子菜单。
#navigation:hover #submenu {visibility: visible}
: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:我交换了ul
和#fubar
元素的位置,以使用相邻兄弟选择器获得所需的解决方案。
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();
})
我明确地说,在鼠标进入时,淡入导航栏,在鼠标离开时,淡出导航栏,并且在点击关闭按钮时,我明确地说当我点击 #grapes 时,强制淡出导航栏。
我做类似这样的事情
$hoveredContainer.css('pointer-events', 'none');
setTimeout(function () {
$hoveredContainer.css('pointer-events', 'auto')
}, 10);
$hoveredContainer 是一个包含正在被悬停的 jQuery 元素的变量。
该代码的作用是让元素在短暂的时间内“取消悬停”。
它适用于当鼠标位于正在进行选择的“展开”区域上方时的下拉菜单。