停止父元素上的 CSS 鼠标悬停/取消悬停效果

Question

说实话，我不确定如何表达这个问题。

我有一个导航栏，当鼠标悬停时，会显示子菜单。

#navigation:hover #submenu {visibility: visible} 

在子菜单中，我有一个关闭按钮，当点击它时，应该停止导航元素的悬停效果。但不能删除未来的悬停效果。

如何解决这个问题？

- user1043646

---

那么它应该折叠子菜单吗？ - mbomb007

你能发布你的HTML和CSS吗？ - Jacob G

为了管理这种类型的交互，您应该通过JavaScript进行管理。如果您发布一个fiddle，更容易理解结构。 - cesare

这是我尝试实现的一个示例。http://jsfiddle.net/v8jroxvx/对于问题描述不够清晰，我很抱歉，我不太确定要使用什么术语。 - user1043646

那么你想要实现什么：鼠标悬停在导航栏上时，链接被显示出来；当鼠标离开导航栏时，导航栏仍然可见，但是点击关闭按钮可以将其关闭？ - pourmesomecode

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

工作的Fiddle

PS：我交换了ul和#fubar元素的位置，以使用相邻兄弟选择器获得所需的解决方案。

- Mr_Green

---

有趣，那兼容性如何？这在IE 8-9上运行良好吗？ - enguerranws

@enguerranws 是的，应该可以工作，因为我这里没有使用CSS3。 :) - Mr_Green

是的，但IE和一些其他浏览器不能识别/理解所有HTML元素上的:active伪类。 - enguerranws

@enguerranws 在IE8+上运行良好 [MDN链接] (https://developer.mozilla.org/zh-CN/docs/Web/CSS/:active#Browser_compatibility) - Mr_Green

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 时，强制淡出导航栏。

- Eli Gassert

Answer 3

我做类似这样的事情

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

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

该代码的作用是让元素在短暂的时间内“取消悬停”。

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

- braks