当不再悬停在触发链接上时，保持显示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/ 非常感谢你们提前的帮忙，对于这个相对模糊的问题，请多多包涵！

- fnune

---

我去年问过一个类似的问题。也许对你有帮助。将鼠标悬停在缩略图上以启动新图像；新图像在悬停结束后仍然存在 - Michael Benjamin

看起来那应该是可行的。虽然我相信只用CSS就可以解决问题，但我的问题可能源于我在HTML元素上使用的结构。如果其他方法都失败了，我一定会使用你的解决方案。谢谢！ - fnune

你可以在鼠标悬停时触发前向CSS动画，然后从那里覆盖显示吗？类似于这里讨论的内容。https://dev59.com/_XA75IYBdhLWcg3weY_u - Zze

你找到了答案吗？我有一个非常类似的问题。 - Fernando Souza

是的，有@Michael_B的帮助，我现在将其发布为答案。 - fnune

Answer 1

好的，我找到了解决方案。@Michael_B的帮助非常棒！最终的代码看起来很糟糕，但它能用！基本上，我在导航栏上的每个链接（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/

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

- fnune