mismo - mostrar y ocultar div jquery

Mostrar/ocultar contenido con jQuery

Question

Tengo contenido en un div que debe mostrarse solo cuando tengo un elemento específico en mi página.

Este es mi código css:

.my-div { display: none }

Este es mi código jQuery:

   $(document).ready(function(){
      $(''.show-div'').hover(function() {
         $(''my-div'').show();
      });
   });        

Y este es mi HTML:

<div class="my-div">
   <p>Hello World</p>
</div>
<a href="#" class="show-div">Show content</a>

En realidad funciona bien, excepto que no estoy seguro de cómo ocultar mi contenido nuevamente al alejar el mouse de mi enlace "Mostrar contenido". ¿Hay algún tipo de método de "desalojo"?

Answer 1

solo para responder Is there some sort of "unhover" method? esta parte específicamente se puede usar blur como tal

$(document).ready(function(){
      $(''.show-div'').blur(function() {
         $(''my-div'').hide();
      });
   }); 

Answer 2

$().hover() admite los parámetros handlerIn y handlerOut :

$(document).ready(function(){
   $(''.show-div'').hover(function() {
      $(this).show();
   }, function() {
      $(this).hide();
   });
});