Discussion :

[pascb423]

Bonjour,
j'ouvre un élément de section avec un :active
est-il possible de le laisser un moment ouvert même si on relâche la souris en css ou en javascript?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 .faq:active > p {text-indent: 0;transition: all 1.5s ease-out 0.3s;-moz-transition: all .5s ease-out 0.3s;-webkit-transition: all .5s ease-out 0.3s;-o-transition: all 1.5s ease-out 0.3s;font-size: .7em; }
 .faq:active {height:auto;padding-left:40px;border-left: 6px solid #888;color: #444;background-color: #ddd;background-image:url(https://trouvezvotrebonheur.com/nouveausite/images/flechegauche.png);background-position:0% 23px;background-position-x: 0%;background-position-y: 23px;}

[Invité]

Bonjour,

• A lire : https://www.developpez.net/forums/d2.../#post11214379

[NoSmoking]

Bonjour,
il est possible de jouer avec une transition aller/retour et en supprimant la transition-duration et delay lorsque l'état :active est déclenché.

A partir du HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="faq">[.......]
  <p class="faq-info">Ici s'affiche l'information</p>
</div>

et en appliquant le CSS ci-dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
.faq .faq-info {
  opacity: 0;
  transition-delay: 3s;              /* délai pour départ de l'effet */
  transition-duration: 1s;           /* durée de l'effet */
  transition-property: opacity;      /* propriété prise en compte */
}
.faq:active .faq-info {
  opacity: 1;
  transition-delay: 0s;              /* on annule, ne pas oublier l'unité */
  transition-duration: 0s;
}

ou plus succinctement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.faq .faq-info {
  opacity: 0;
  transition: opacity 1s 3s;
}
.faq:active .faq-info {
  opacity: 1;
  transition: opacity 0s;            /* apparition immédiate */
}

cela devrait y ressembler.