jquery - 分区 :hover is affecting all elements below

Question

这是一个示例 fiddle :http://jsfiddle.net/K2zyU/4/

我遇到的问题是主导航悬停应用于子导航项。例如，如果我要将列表移动到主导航 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>