html - 纯 CSS 条件菜单：在 level2 悬停时隐藏 level1 信息

Question

我正在开发一个带有信息区域的纯 CSS 下拉菜单。

我的问题是，我想显示第一级的信息，但是当您将鼠标悬停在第二级时将其隐藏。这是一个JSFiddle

问题是，我不知道如何隐藏第一级信息

我知道我无法访问父级，所以我尝试使其成为有条件的，例如：

menu-level1 > ul > li:not(.menu-level2):hover > .menu-info

但这似乎不起作用。

我如何编写条件才能使其工作？

Answer 1

我很高兴我终于明白了你的意思，尽管有些困难。而且，当我得到你想看的东西时，我会更开心:-)

这是：http: //jsfiddle.net/5Jjfj/11/

新的 CSS（非常小的变化）：

.menu-level1 > ul > li a:hover + .menu-info, .menu-info:hover {
    display: block;
}

代替：

.menu-level1 > ul > li:hover > .menu-info, .menu-info:hover {
    display: none;
}

Answer 2

看一下这个。

http://jsfiddle.net/5Jjfj/4/

.menu-level1 > ul > li:hover > .menu-info, .menu-info:hover {
    display: none;
}