html - 未选择 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;
}

我的问题是类没有被选中并且在滚动时不会显示(我正在谈论的类被标记为<---)

应该发生的事情:你在灰色方 block 上滚动，然后弹出一条蓝线

实际发生了什么:你在没有任何反应的情况下翻过它

请指教。

JS fiddle :http://jsfiddle.net/5cLuL/

Answer 1

如果你有这个 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

...当鼠标悬停在 #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 可见。