jquery - 在父元素上停止 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 元素的位置，以使用相邻的兄弟选择器获得所需的解决方案。