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

2019年7月27日 234次阅读

我刚刚编写的菜单有问题：
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/

非常感谢你们,并原谅相对模糊的问题！

最佳答案 好的,所以我或多或少找到了解决方案. @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/

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

点赞