jQuery fadeToggle + combinaison mouseout, empêcher le contenu basculée déclenchement d'un événement

Question

Je suis en train de réaliser ceci:

Afficher une boîte montrant une image pleine largeur & hauteur, contenant également un déclencheur. En survolant le déclencheur, un DIV s'étendra pour couvrir la boîte, puis révélera du contenu, y compris un lien cliquable. Lorsque vous déplacez le curseur hors de la zone d'image, le couvercle DIV disparaît et la boîte revient à son état d'origine.

Voici où je suis:

http://jsfiddle.net/wfXYy/1/

Je cherche des pointeurs pour deux choses:

1. Pour assurer une seule instance de la DIV (.content) est révélé (c'est-à-dire: afficher uniquement le contenu du déclencheur de la boîte survolé). Assurez-vous que lorsque le texte contenu dans .content est survolé (le lien), il ne ferme pas le contenu révélé et revient à son état original, mais vous pouvez heureusement cliquer sur le lien.

Pour le point 1, je suis sûr que « ce » est la réponse, mais ne peut pas obtenir ce travail, et pour le point 2, je me demande pourquoi lors du survol du texte, le déclencheur est déclenché.

Jolie que tout le travail doit être fait dans ce bloc de jQuery:

$('.corner').hover(function() { 
    $(this).addClass("corner-full").mouseout(function() { 
     $(".corner").removeClass("corner-full");  
    }); 
    $('.content').fadeToggle(); 
}); 

Des conseils très appréciés, merci.

Answer 1

Vous pouvez configurer votre HTML comme ceci:

<div class="wrap"> 
    <div class="image-cover"> 
     <div class="corner"> 
      <div class="content"> 
       <h1>Title</h1> 
       <a href="#">Link</a> 
      </div> 
     </div> 
     <img src="http://dummyimage.com/300x300/ccc/ccc" /> 
    </div> 
</div> 

Et jquery comme ceci:

$('.corner').hover(function() { 
    $(this).addClass("corner-full"); 
    $(".content", this).fadeToggle(); 
}, function() { 
    $(this).removeClass("corner-full"); 
    $(".content", this).fadeToggle(); 
}); 

Answer 2

Pas besoin d'utiliser le gestionnaire mouseout; la fonction hover prendra soin de cela pour vous avec un second rappel. Vous pouvez utiliser next pour obtenir la div .content pertinente.

$('.corner').hover(function() { 
    $(this).addClass("corner-full").next().fadeToggle(); 
}, function() { 
    $(this).removeClass("corner-full").next().fadeToggle(); 
}); 

Working Fiddle

api.jquery.com/hover/