Eliminar la clase con la salida del mouse
Estoy realizando un mouseenter / mouseleave con jQuery y parece estar funcionando, pero no cuando salgo del div. Esto solo funciona cuando salgo de la ventana real.
Esta es mi jQuery
$(document).ready(function() {
$(".pods .col").on("mouseenter", function() {
$(this).find(".pod-overlay").addClass("show")
});
$(".pods .col").on("mouseleave", function() {
$(this).find(".pod-overlay").removeClass("show")
});
});
Este es mi HTML
<div id="splash" class="section section-splash bg">
<div class="pods">
<div class="col col-4">
<div id="pod-splash-food" class="pod pod-food">
<div class="pod-overlay"></div>
</div>
</div>
</div>
</div>
He hecho un violín aquí. Estoy aprendiendo jquery, por lo que agradezco sus consejos.