javascript - 悬停菜单上显示嵌套的 div

Question

我创建了一个 JSFiddle，请查看。

fiddle

我无法将 css 定位到嵌套 div 的悬停功能。在代码示例中，我如何让以下目标成为特定的 div

div id=”nav1″ display div id=”section5″

div id=”nav2″ display div id=”section6″ 

目前，parent div id=”nav” 显示 div id=”section5″

如果有更好的方法，请告诉我。

谢谢

Answer 1

您需要稍微更改您的 HTML 结构，删除父 .nav 以制作 #nav1、#nav2、 #section5 和 #section6 “ sibling ”。然后使用兄弟 CSS 选择器来定位您想要的内容:

CSS:

#nav1:hover ~ #section5,
    #section5:hover  {
    display:  block;
}

#nav2:hover ~ #section6,
    #section6:hover  {
    display:  block;
}

fiddle :https://jsfiddle.net/lmgonzalves/9965yanr/6/

编辑:

添加 float 和 .nav 具有的其他属性，并进行一些您可以改进的调整。查看工作演示:https://jsfiddle.net/lmgonzalves/9965yanr/8/