未选择CSS类

Question

我已经制作了一个div，当您翻转它时，应该在其中显示第二个div。

HTML：

<div id="nav"> 
    <img src="" width="80" height="80" style="background-color: #666666"> 
    <div class="hover">la</div> 
</div> 

CSS：

#nav { 
    height:80px; 
    width:80px; 
    background-color:red; 
    padding:0; 
    margin:0; 
    position: relative; 
} 

#nav .hover { 
background: #f8f8f8; 
    height: auto; width: 800px; 
    position: absolute; 
    left: 50%; 
    visibility:hidden; 
    margin: -10px 0px 0px -400px; 
    padding: 10px; 
    display: block; 
    border: 1px solid #afafaf; 
    box-shadow: 0 5px 20px -2px #444; 
    border-top-left-radius: 7px; 
    border-bottom-right-radius: 7px; 
} 

#nav:hover > #nav .hover { <--- 
    visibility:visible; 
} 

我的问题是类未选中，当滑过不会显示（其中我说的被标记类< ---）

请告诉我应该发生的：你翻身的灰色方块安达蓝线弹出

究竟发生了什么：你在什么都不会发生的情况下滚过它

请指教。

JS小提琴：http://jsfiddle.net/5cLuL/

Answer 1

切换到这一点，贵精

#nav:hover > .hover { 
     visibility:visible; 
    } 

Answer 2

如果你有这样的HTML ...

<div id="nav"> 
    <img src="" width="80" height="80" style="background-color: #666666"> 
    <div class="hover">la</div> 
</div> 

和这个有你​​的CSS：

#nav:hover > #nav .hover 

... when悬停发生在#nav-element上，它将样式应用于#nav的子项，但#nav位于其中，因此您的代码不起作用。

它的工作与HTML这样的：

<div id="nav"> 
    <div id="nav"> 
     <img src="" width="80" height="80" style="background-color: #666666"> 
     <div class="hover">la</div> 
    </div> 
</div> 

但上面没有有效的HTML。

有了这个CSS ...

#nav:hover > .hover { 
    visibility:visible; 
} 

...徘徊在#nav时，它使#nav孩子有.hover类可见。