masquer/afficher Div avec CSS sans JS Résolu/Fermé

Question

Bonjour,
Voilà, il me semble que tout est dans le titre du message. C'est une question toute simple, mais je ne trouve pas la réponse sous google... Est-il donc possible de se passer de javascript pour afficher et masquer une div?
Merci de vos réponses éclairées sur ce sujet.

macgawel · Accepted Answer

Bonjour.

Un DIV, non (enfin pas en repsectant la norme XHTML)

Par contre, il est possible de simuler ça avec un span

En fait, le "truc", c'est d'utiliser la balise <a> et la pseudo-balise a:hover, et les héritages : 
a span {
   display: none;
}
a:hover span {
   display:inline;
   ...
}
Conséquence : quand la souris passe sur la zone du lien, le span s'affiche.

Voir l'article d'Alsacreations pour plus de détails...

Mais si l'objectif est de faire un affichage/masquage sur un clic (genre "cliquez pour voir la suite"), je ne connais pas de solution sans JS :-(

Dalida · Answer

salut,

tu peux le faire avec la pseudo-classe ':hover', aussi avec ':active' mais je ne crois pas que ça fonctionne partout.

un exemple, survole le "lire plus" an blanc.

à la base il y avait un JS pour afficher au clic, j'ai ajouté le comportement au survol :
a.lireplus span{
position:absolute;
display:none;
width:200px;
background-color:#fff;
border:1px solid #4a3826;
padding:5px;
color:#4a3826;
}
a.lireplus:hover span{
display:block;
}

pijaku · Answer

Merci pour vos réponses. 
Effectivement, il manquait un élément important à ma question... Désolé!!! En fait, je veux afficher et masquer une Div avec CSS sans JS au clic... Je sais que c'est possible car j'ai trouvé ceci : http://www.cssplay.co.uk/menu/lightbox3.html (c'est superbe) mais je ne suis pas suffisamment calé pour isoler le bout de code dont j'ai besoin.

Dalida · Answer

c'est avec la pseudo-classe ":focus", me suis trompé tout à l'heure&hellip;
.photo ul.topic li:hover ul li a:focus img, 
.photo ul.topic li:hover ul li a:active img, 
.photo ul.topic li a:hover ul li a:active img 
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}

.photo ul.topic li:hover ul li a:focus img.large, 
.photo ul.topic li:hover ul li a:active img.large, 
.photo ul.topic li a:hover ul li a:active img.large 
{position:absolute; left:15px; top:24px; width:640px; height:480px; padding:0; background:#000; border:4px solid #fff; z-index:10;}
le principe est le même que les codes données au dessus.

gryzzly · Answer

Attention avec les pseudos classes hover, active & co ...
Ne fonctionne pas tout le temps sous IE ...

Pour y remédier : http://dean.edwards.name/IE7/ (prise en charge de bien d'autres particularités liées à IE). Jamais testé personnellement, mais de bon échos sur la toile.

Je ne suis pas fervent utilisateur du js dans les pages web, que j'évite au maximum, mais si ça peut faire gagner du temps pour augmenter la compatibilité.

pijaku · Answer

merci à tous, je vais me pencher là dessus.
bye

topordi · Answer

Le CSS, à lui seul, ne pourra pas avoir le comportement que tu souhaites..il y'aura forcément du script la dessous. La solution ci-dessus est contraignante puisque elle repose sur des pseudo classes avec tous les ennuis de compatibilité (hover sur ie par exemple) et elle oblige d'etre "hover" certaine partie pour fonctionner... le javascript est la vraie solution sans détour possible même s'il est vrai que notre prérogative absolue est de s'en affranchir au maximum .... et de l'utiliser comme une fonctionnalité supplémentaire et jamais comme indispensable.

A+

Masquer/afficher Div avec CSS sans JS

7 réponses

Discussions similaires