Afficher et masquer un DIV avec CSS ou Javascript?

Question

Je viens de voir une démo qui avait ce code jquery pour montrer et cacher une plongée en vol stationnaire, cela ne peut-il pas être fait seulement avec regualr css? Et si vous pouvez le faire avec css est-il un avantage de le faire avec javascript?

$('.comment').hover(function() { 
    $(this).children('.delete').show(); 
}, function() { 
    $(this).children('.delete').hide(); 
}); 

Answer 1

CSS hover fonctionne bien avec les balises d'ancrage, mais IE6 ne reconnaît pas les événements hover sur des choses comme les balises li.

Si vous utilisez une balise d'ancrage, cependant, vous pouvez obtenir le même effet en CSS:

a.comment  .delete { display: none; } 
a.comment:hover .delete { display: block; } 

Answer 2

Vous pouvez le faire avec CSS, mais IE6 ne supporte que: hover pseudo-classe sur les balises d'ancrage (A), il est donc pas aussi commun.

Answer 3

Jody est correcte. Découvrez les documents pour la propriété CSS Display.

Answer 4

Il y a plus de fonctionnalités que le .hover fera. Si vous lui fournissez plus de 2 fonctions, il fera défiler toutes les fonctions. Exemple

$('.comment').hover(
    function(){$(this).children('.delete.first').show()}, 
    function(){$(this).children('.delete.first').hide()}, 
    function(){$(this).children('.delete.second').show()}, 
    function(){$(this).children('.delete.second').hide()} 
    ); 

qui montrerait un ensemble d'enfants la première fois qu'ils planent, puis cacher, et la prochaine fois montrer un ensemble différent des enfants.

La fonction de vol stationnaire fonctionne également sur plusieurs éléments, et ne se déclenche que si la souris a laissé tous les éléments (et pas seulement quand il quitte un et se déplace à l'autre)

Answer 5

Je crée dynamiquement quelque chose comme ceci sur le côté serveur . Je suis sûr qu'il y a une manière plus efficace/plus jolie mais ceci sert habituellement mes besoins. Fondamentalement, cache toutes les divs et décompacte celle qui doit être montrée (passée en arg dans la fonction de l'événement onClick).

function toggleTab(id) 
{ 
    document.getElementById('divEnrollment').style.display='none';  
    document.getElementById('divSearch').style.display='none'; 
    document.getElementById('divMeeting').style.display='none'; 
    document.getElementById('divBenefit').style.display='none'; 
    document.getElementById('div' + id).style.display='block'; 

    document.getElementById('spnEnrollment').style.color='blue';  
    document.getElementById('spnSearch').style.color='blue'; 
    document.getElementById('spnMeeting').style.color='blue'; 
    document.getElementById('spnBenefit').style.color='blue'; 
    document.getElementById('spn'+id).style.color = 'red'; 
}