Système Hover Div

Question

Dites que j'ai un div avec un lien dedans. Quand je passe la souris dessus, je veux qu'un autre div disparaisse au-dessus avec un peu de contenu, puis disparaisse avec la souris.

Exemple trouvé ici: http://bit.ly/c59sT4

Answer 1

Vous pouvez faire quelque chose réutilisable en utilisant .hover() et the fading functions, comme ceci:

$(".container").hover(function() { 
    $(this).find(".hover").fadeIn(); 
}, function() { 
    $(this).find(".hover").fadeOut(); 
}); 

Par exemple, voici le balisage de démonstration, bien que les éléments <div> peuvent contenir quoi que ce soit:

<div class="container"> 
    <div class="hover"> 
     Content Here 
    </div> 
    <a href="#">Link</a> 
</div> 

Ensuite, via CSS vous positionnez simplement à l'intérieur <div> absolument et le donner la même taille, comme ceci:

.container, .hover { width: 100px; height: 300px; background: white; } 
.hover { position: absolute; display: none; } 

You can give it a try here.

Answer 2

J'utiliser jquery et ses fadeIn et fadeOut fonctions, conjointement avec hover

Answer 3

Pour que vous souhaitez utiliser JQuery en particulier l'événement .hover(). Une fois que vous aurez compris cela, vous trouverez trivial de faire des tâches comme celle-ci qui fonctionnent à travers le navigateur.

Answer 4

html:

<div id="container"> 
    <a href="#" id="link">Link</a> 
    <div id="divtofadein">some content here</div> 
</div> 

js:

$(function(){ 
$("#divtofadein").mouseout(function(){ 
    $(this).fadeOut(); 
}) 
    .hide(); 

$("#link").click(function(){ 
    $("#divtofadein").fadeIn(); 
}); 
}); 

css:

#container { 
position: relative; 
width: 100px; 
height: 200px; 
} 

#link { 
position: absolute; 
top: 0px; 
left: 0px; 
} 

#divtofadein { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 100px; 
height: 200px; 
background: #FFF; 
}