Masquer/afficher Div avec CSS sans JS [Résolu/Fermé]

Signaler
Messages postés
12177
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
26 juin 2020
-
Messages postés
395
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
25 juillet 2019
-
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.

7 réponses

Messages postés
671
Date d'inscription
mercredi 7 mai 2008
Statut
Membre
Dernière intervention
1 novembre 2008
87
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 :-(
17
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 61131 internautes nous ont dit merci ce mois-ci

Messages postés
395
Date d'inscription
lundi 6 juin 2011
Statut
Membre
Dernière intervention
25 juillet 2019
1
plus clair et plus simple que le CSS merci pour ce post
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+
Messages postés
6764
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
891
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;
}
Messages postés
12177
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
26 juin 2020
2 449
merci à tous, je vais me pencher là dessus.
bye
Messages postés
12177
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
26 juin 2020
2 449
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.
Messages postés
4606
Date d'inscription
lundi 7 novembre 2005
Statut
Contributeur
Dernière intervention
30 avril 2020
1 261
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é.
Messages postés
6764
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
891
c'est avec la pseudo-classe ":focus", me suis trompé tout à l'heure…
.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.