Comment afficher une div en superposition lorsque vous survolez une div avec jQuery?

J’ai créé un exemple de travail . En gros, vous devez créer 3 divs avec des conteneurs visibles et invisibles, append un gestionnaire d’événement survol et basculer la visibilité de l’ info-bulle dans ce gestionnaire.

HTML:

 
box 1
 
tooltip 1
 
 
 
box 2
 
tooltip 2
 
 
 
box 3
 
tooltip 3
  

CSS:

 .parents { float: left; margin: 5px; } .box, .tooltip { width: 80px; height: 30px; line-height: 30px; background-color: #666; color: #fff; border: 1px solid #222; text-align: center; } .tooltip { display: none; position: absolute; top: 50px; } 

Code jQuery:

 $(document).ready ( function () { // add hover event handler $('.box').hover ( function () { // find the sortingggering box parent, and it's tooltip child $(this).parent().children('.tooltip').animate ( { opacity: "toggle", // toggle opacity } ); } ); } ); 

IBM utilise la méthode .expand de Dojo. Vous pouvez faire la même fonctionnalité dans jQuery en utilisant le plugin expand .

Vous pouvez facilement faire ça. Les étapes doivent suivre:

1) Avoir 3 blocs comme DIV ou UL LI et append le conteneur caché à l’intérieur (ou peu importe si vous allez définir la position avec jQuery. Si votre structure serait:

2) Attachez les événements mouseenter et mouseleave aux 3 blocs tels que:

 $('.block').mouseenter(function() { // some code to show the hidden container $(this).find('.visible').show().addClass('visible_container'); }); $('.block').mouseleave(function() { // some other code to hide the shown container $('.visible_container').hide(); // Hide all the instances of .visible_container }); 

3) Vous devez modifier JS ou CSS en fonction des méthodes de positionnement de vos éléments. Ainsi, lorsque show() est appelée, l’élément est affiché directement au-dessus de l’élément. Par exemple, si votre bloc caché aurait une position: absolute règle CSS position: absolute vous utiliseriez:

 $(this).find('.visible') .show() .addClass('visible_container') .css('top', $(this).offset().top+'px') .css('left', $(this).offset().left+'px'); 

Dans ce cas, le conteneur illustré serait ajusté dans le coin supérieur droit du bloc en vol stationnaire.

Comme le conteneur caché est un enfant du conteneur de blocs, aucun événement mouseleave ne sera appelé pour restr affiché.