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

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

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

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

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+

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.

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

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.