fadeIn child on hover y fade out out en child blur - jquery

Estoy seguro de que esto ha sido pedido pero no lo he localizado.

Tengo artículos de li que actúan como padres de divs de submenú de niños.

En la pantalla principal, se muestra el div niño. Pero cuando borro al padre, el div niño se esconde.

¿Cómo puedo hacerlo para que el div infantil permanezca visible siempre que el cursor del mouse esté sobre el div infantil, una vez que el cursor abandona el div, el div se ocultará?

Mi código hasta ahora es el siguiente:

$(document).ready(function(){
$(".menuSection").hover(function(){
$(this).children(".subMenuWrap").fadeIn(100);
});
$(".subMenuWrap").blur(function(){
$(this).fadeOut(100);
});
});

A partir de ahora, el fadeIn funciona bien, simplemente no desaparecen en el desenfoque. Cualquier ayuda es apreciada!

Respuestas

Hover y desenfoque se refieren a diferentes cosas. Hover se refiere a la ubicación del mouse (mouseenter, mouseleave) y blur significa el elemento perdido focus. Puedes dar hover dos funciones, la primera se ejecutará cuando el usuario mueva el mouse hacia el área, la segunda se ejecutará cuando el mouse se vaya:

$(document).ready(function(){
$(".menuSection").hover(function(){
$(this).children(".subMenuWrap").fadeIn(100);
},function(){
$(this).children(".subMenuWrap").fadeOut(100);
});
});