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元素＆＃39;使用相邻的兄弟选择器获得所需解决方案的位置。

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();
})

我明确地说鼠标输入，中淡出导航，鼠标离开时退出，淡出导航，如果点击关闭按钮，我就是明确地说当我点击#grapes时，强行淡出导航。

Answer 3

我这样做

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

$ hoveredContainer是一个包含正在悬停的jQuery元素的变量。

该代码执行的操作是“暂停”元素一瞬间。

当鼠标位于正在进行选择的“扩展”区域上时，它适用于下拉。

在父元素上停止CSS hover / unhover

3 个答案: