保持對孩子懸停效果盤旋而如果父父裏面

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>