Question

我遇到了麻烦。当你将鼠标悬停在我上面时，我试图让.info显示：
.infoBanner .open

HTML

<div class="infoBanner">
    <span><b>Click</b><span class="open">get info</span></span>
</div>
<div class="info">
    <span>This is more info</span> 
</div>

CSS

.info{
    display:none;
}

.open:hover{

    .info{
    display:block;
    }
}

Answer 1

您无法执行此操作，因为.info不是.open的孩子。

以下示例可行，因为.info是.infoBaner

的孩子

HTML

<div class="infoBanner">
         <span><b>Click</b> <span class="open">get info</span></span>
        /* removed the </div> from here */
<div class="info">
     <span>This is more info</span> 
</div>

</div>  /* and placed it here */

CSS

 .info{
    display:none;
 }

.infoBanner:hover .info {
     display: block;
 }

工作示例http://jsfiddle.net/Hqkdy/

编辑：要将鼠标悬停在“获取信息”上方，请将其打开，将范围更改为div，然后重新排列内容，例如

HTML

<div class="infoBanner"> <span><b>Click</b> <div class="open">get info<div class="info">
     <span>This is more info</span> 
     </div>
</div>
</span>
</div>

CSS

.info {
    display:none;
}
.open:hover .info {
    display:block;
}

工作示例http://jsfiddle.net/Hqkdy/1/

Answer 2

如果您无法访问标记并且只需要使用css进行修复，请尝试使用

.infoBanner:hover + .info{     
    display:block;     
}
.info{
    display:none;
}

工作示例：

http://jsfiddle.net/AjLk4/

无法隐藏div

2 个答案: