26787 sujets

CSS et mise en forme, CSS3

Bonjour.

Je ne suis aucunement bon connaisseur du CSS et encore moins des actions qui peuvent être obtenues grâce à lui ; donc, je voudrais savoir si, uniquement avec du CSS, je peux faire disparaître un div au clic souris. Avec #ledivamasquer:hover, j'y arrive (display: none;), mais évidemment c'est temporaire (c'est le passage de la souris qui fait réagir, non le clic).

HTML (exemple)
<div id="div1">
  <p>texte 1</p>
</div>
<div id="ledivamasquer">
  <p>texte 2</p>
</div>
<div id="div3">
  <p>texte 3</p>
</div>


CSS
#div1 {
  background: lightyellow;
}
#ledivamasquer {
  background: silver;
}

#ledivamasquer:hover {
  display: none;
}

#div 3 {
  background: green;
}



Désolé si la question est très basique : elle ne l'est pas pour moi. D'autant que je n'arrive pas à comprendre :focus et :target...

Merci pour toute aide. Smiley smile
Bonjour Piteur,
A ma connaissance (mais je suis pas expert donc je peux me tromper^^) ce n'est pas possible en CSS pur.
Cependant, avec un peu de javascript ce n'est pas bien compliqué: tu crées deux classes CSS, une en "display: none" et une en "display: block" (par exemple). Et en javascript tu fais juste une petite fonction qui supprime / ajoute les classes qui vont bien.

HTML
<div id="div1">
  <p>texte 1</p>
</div>
<div id="ledivamasquer" onClick="masquerlediv()" class="le_div_visible">
  <p>texte 2</p>
</div>
<div id="div3">
  <p>texte 3</p>
</div>

CSS
#div1 {
  background: lightyellow;
}
.le_div_visible {
display: block;
  background: silver;
}

.le_div_masque {
  display: none;
}

#div 3 {
  background: green;
}

Javascript

function masquerlediv(){
  var container_Elt = document.getElementById('ledivamasquer');
  container_Elt.classList.add("le_div_masque");
  container_Elt.classList.remove("le_div_visible");
}
@Mathieu8337 : D'accord. Merci pour cette réponse détaillée et tout de suite utilisable... Je m'y remets !

Je laisse toutefois le sujet ouvert, car quelqu'un d'autre connaître peut-être une astuce CSS3...
Modifié par Piteur511 (22 Aug 2019 - 14:28)
Piteur511 a écrit :
@Mathieu8337 : D'accord. Merci pour cette réponse détaillée et tout de suite utilisable... Je m'y remets !

Je laisse toutefois le sujet ouvert, car quelqu'un d'autre connaître peut-être une astuce CSS3...


lis mon message, tu as ta réponse
farang a écrit :
http://css-workshop.com/css-show-hide-div-without-javascript/
Compatibilité non garantie, à ta place j'utiliserais Javascript

Merci, Farang. Pourquoi ce doute sur la compatibilité ? En plus, un souci : il reste toujours le bouton à cocher...

Au fait, quelqu'un pourrait-il m'expliquer l'utilisation de :focus et/ou :target ? C'est complètement obscur pour moi !

Merci.
Modifié par Piteur511 (22 Aug 2019 - 14:32)