未選擇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類可見。