保持对孩子悬停效果盘旋而如果父父里面

Question

孩子的心不是我对的jsfiddle简单的例子：http://jsfiddle.net/to1hmg1L/

正如你所看到的，当你将鼠标悬停在.parent的.child会显示出来。问题是，当您将鼠标悬停在.child上时，它会消失。因为.parent不是真正的父级（子级不在父级的div内）。 我想在通过.parent和.child悬停时看到.child。 我只是想创建一些像弹出窗口（菜单下拉菜单）。请仅使用HTML，CSS和JS解决方案。

.parent { 
 
    background-color: #32CD32; 
 
    width: 100px; 
 
    height: 40px; 
 
    display: block; 
 
    
 
} 
 
.child { 
 
    background: #bada55; 
 
    width: 100px; 
 
    height: 75px; 
 
    display: none; 
 

 
} 
 
.parent:hover + .child { 
 
    display: block; 
 
}

<div class="parent"></div><div class="child"></div>

Answer 1

你并不需要为这个JavaScript中，你可以指定你还想要.child有display:block当它盘旋加入, .child:hover你的CSS：

.parent { 
 
    background-color: #32CD32; 
 
    width: 100px; 
 
    height: 40px; 
 
    display: block; 
 
    
 
} 
 
.child { 
 
    background: #bada55; 
 
    width: 100px; 
 
    height: 75px; 
 
    display: none; 
 

 
} 
 
.parent:hover + .child, .child:hover { 
 
    display: block; 
 
}

<div class="parent"></div><div class="child"></div>