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;
}

我的问题是课程没有被选中，并且在翻身时不会显示（我所说的课程被标记为＆lt; ---）

应该发生什么：你翻过灰色方块，然后弹出一条蓝线

实际发生的事情：没有任何反应你翻身

请告知。

JS小提琴：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中的<div id="nav"> <div id="nav"> <img src="" width="80" height="80" style="background-color: #666666"> <div class="hover">la</div> </div> </div>，因此您的代码无效。

它可以用html工作：

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

但上面的内容无效。

用这个css ......

#nav

...当鼠标悬停在#nav时，它会让.hover的孩子看到{{1}}类。

Answer 2

更改为此和您的罚款

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

未选择CSS类

2 个答案: