Question

我遇到的问题是主导航悬停正在应用于子导航项。例如，如果我将列表移动到主导航div上方，则悬停按照我的预期工作？在这种情况下，我不确定我错过了什么/做错了什么。

<div class="main">MAIN NAV<div>
<ul class="sub">
    <li>SUB NAV 1</li>
    <li>SUB NAV 2</li>
    <li>SUB NAV 3</li>
    <li>SUB NAV 4</li>
    <li>SUB NAV 5</li>
    <li>SUB NAV 6</li>
</ul>

.main:hover, .sub li:hover {
    color: black;
    background-color: #f3ffff;
    opacity: .6;
}

Answer 1

问题在于这一行

<div class="main">MAIN NAV<div>

您尚未关闭div，因此该列表是该div的子项。它应该是

<div class="main">MAIN NAV</div>

Answer 2

您缺少/

<div class="main">MAIN NAV</div>

http://jsfiddle.net/K2zyU/11/

Answer 3

您忘了关闭main div。试试这个：

<div class="main">MAIN NAV</div>

Answer 4

我想当你尝试使用.main合并两个菜单时，这就是你正在寻找的效果{。}：hover，.sub li：hover效果应用于主div作为整个，只有子菜单的文本颜色更改而不是背景。我把它固定在上面的小提琴里。

div：hover正在影响下面的所有元素

4 个答案: