Скрыть элемент, если мышь покидает родительский

Question

У меня есть два div, родительский, скажем, 100 * 100px маленький. Когда пользователь наводит родителя, появляется небольшое всплывающее окно с содержимым (абсолютное расположение в одну сторону). Этот div похож на всплывающую подсказку и дочерний элемент div размером 100px. Теперь, когда пользователь покидает родительский div, ребенок должен быть скрыт - даже если мышь покидает родительскую область 100px * 100px.

Как я могу это достичь?

Answer 1

Вы можете легко назначить стили CSS к элементу на родитель: парить

.tooltip { 
    display: none; 
} 
:hover .tooltip { 
    display: block; 
} 

Answer 2

Проверьте ниже примера.

#parent { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: palegreen; 
 
} 
 
#child { 
 
    position: absolute; 
 
    display: none; 
 
    background-color: green; 
 
    color: white; 
 
} 
 
#parent:hover #child { 
 
    display: block; 
 
} 
 
#parent:hover #child:hover { 
 
    display: none; 
 
}

<div id="parent"> 
 
    <div id="child"> 
 
    some content for the popup 
 
    </div> 
 
</div>

Answer 3

Для этого решения я использую JQuery

$('#parent').on('mouseleave', function() { 
 
    $('#child').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div id="child">Child Text</div> 
 
    Parent Text 
 
</div>