不再悬停在触发器 link 上时继续显示 div

Question

我刚编写的菜单有问题：https://jsfiddle.net/nL124rLq/1/

我在 css 上使用了通用选择器 (~)，我认为这可能是个错误，因为它可能是我问题的根源：

#nav #link1:hover ~ #flydown {
left:0;
display:block;
}

#nav #link2:hover ~ #flydown {
    left:-100%;
    display:block;
}

...等等。

如您所见，一切正常，但当我停止悬停在锚点上时，链接下方的滑动菜单消失。我知道我的代码不是为了让它正常工作而设计的，但我想不出让它工作的方法。

我将向构成滑块的彩色区域添加内容（子菜单），因此它们必须是可点击的，并且当用户将鼠标悬停在它们上方时必须保持可见。

如果有任何帮助，我从这个网站得到了这个想法：http://www.tiffany.es/

非常感谢你们 各位，请原谅这个相对模糊的问题！

Answer 1

好的，所以我或多或少找到了解决方案。 @Michael_B 的帮助太棒了！虽然生成的代码看起来很糟糕。哦，好吧，它有效！

基本上，我将此添加到导航中的每个 link（link1、link2...等）：

$("#link1").on("mouseover", function () {
$(".flydown").addClass('permahover1');
});

$(".flydown").mouseleave(function () {
$(".flydown").removeClass('permahover1');
});

...并为我的菜单中的每个元素（permahover1、permahover2 等）添加一次以下 CSS，以指定它们的不同位置 left:0%，left:-100%，等:

.flydown.permahover1 {
left:0%;
display:block;
}

它很快就变脏了。但我不知道更好的解决方案。这是一个有效的 JSFiddle：

https://jsfiddle.net/nL124rLq/4/

一如既往，非常感谢你们的帮助！

不再悬停在触发器 link 上时继续显示 div

Keep showing div when not hovering on trigger link anymore

html

css