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的帮助太棒了！结果代码看起来很可怕。哦，它有效！

基本上我把它添加到我在nav上的每个链接上（link1，link2 ......等）：

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

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

...并为菜单中的每个元素（permahover1，permahover2等）添加了以下CSS，以指定左边的不同位置：0％，左：-100％等：

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

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

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

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

不再悬停在触发链接上时继续显示div

1 个答案: