Держите эффект при наведении на ребенке во время зависания родителя, если ребенок разве внутри родителя

Question

У меня есть простой пример на jsfiddle: http://jsfiddle.net/to1hmg1L/

Как вы можете видеть, когда вы наведите курсор мыши на .parent.child будут отображаться. Проблема в том, что когда вы наводите верх над .child, он исчезает. Поскольку .parent не является истинным родителем (дочерний элемент isnt внутри родительского div). Я хочу держать .child видна при наведении курсора на .parent и .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>