Rechercher : dans
Par :

Masquer/afficher Div avec CSS sans JS

Dernière réponse le 23 jui 2008 à 15:05:05 pijaku, le 22 jui 2008 à 12:11:39 
 Signaler ce message aux modérateurs

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.

Meilleures réponses pour « masquer/afficher Div avec CSS sans JS » dans :
Popup en CSS, sans Javascript Voir Voici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Une popup d'information au survol sans Javascript ni CSS VoirParfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...
Différence entre display:none et visibility:hidden VoirLes deux attributs CSS display:none et visibility:hidden permettent tous deux de masquer l'affichage d'un élément en CSS dans le navigateur. Néanmoins, il existe une subtile nuance : visibility: hidden rend le bloc concerné invisible....
Javascript - L'objet Date VoirLes particularités de l'objet Date L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps. Il s'agit d'un objet inclus de façon native dans Javascript, et que l'on peut toujours utiliser. La...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...

1

Dalida, le 22 jui 2008 à 12:31:46

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;
}
[ Mathieu ]
Il y a surement des pandas pour ne dépendre de rien

Répondre à Dalida

2

macgawel, le 22 jui 2008 à 12:33:42

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 :-(
Si tu donnes à celui qui a faim un poisson, tu le nourris pour un jour ; si tu lui apprends à pêcher, tu le nourris pour toujours.

Répondre à macgawel

3

pijaku, le 22 jui 2008 à 12:45:56

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.

Répondre à pijaku

4

Dalida, le 22 jui 2008 à 13:35:44

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.
[ Mathieu ]
Il y a surement des pandas pour ne dépendre de rien

Répondre à Dalida

5

gryzzly, le 22 jui 2008 à 13:50:54

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

Répondre à gryzzly

6

 pijaku, le 23 jui 2008 à 15:05:05
  • +3

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

Répondre à pijaku
Collection CommentÇaMarche.net