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

A voir également:Afficher cacher div css sans javascriptAfficher cacher div css - Meilleures réponses Html css masquer afficher - Meilleures réponses Comment réaliser un parallax en pur CSS sans JS ? ✓ - Forum - Webmaster Afficher/masquer un div à la fois avec javascript ✓ - Forum - Javascript Afficher et Masquer un DIV ✓ - Forum - HTML Afficher / Masquer une Div ✓ - Forum - HTML Afficher / Masquer des <div> (Jquery) ✓ - Forum - Javascript

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.

Forum

A voir également:Afficher cacher div css sans javascriptAfficher cacher div css - Meilleures réponses Html css masquer afficher - Meilleures réponses Comment réaliser un parallax en pur CSS sans JS ? ✓ - Forum - Webmaster Afficher/masquer un div à la fois avec javascript ✓ - Forum - Javascript Afficher et Masquer un DIV ✓ - Forum - HTML Afficher / Masquer une Div ✓ - Forum - HTML Afficher / Masquer des <div> (Jquery) ✓ - Forum - Javascript

Web: www.shapebootstrap.net

7 réponses

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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 :-(

Dire « Merci » 17

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

CCM 56340 internautes nous ont dit merci ce mois-ci

Reply
réponses:
  • auteur

    plus clair et plus simple que le CSS merci pour ce post

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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+

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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;  }

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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.

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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é.

Reply

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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.

Reply

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed