Partage
  • Partager sur Facebook
  • Partager sur Twitter

Modifier comportement :active

ou utilisation de :focus ?

Sujet résolu
    6 février 2020 à 10:12:47

    Hello,

    J'aimerais savoir s'il est possible de modifier le comportement de :active

    -> c'est à dire : par défaut on clique, et cela adopte les propriété définis en css. Losqu'on "déclique" on revient à l'état initial.

    Moi, ce que j'aimerais, c'est que :active reste "enfoncé" lorsqu'on relâche la souris jusqu'à ce que l'on clique ailleurs. En fait un peu le comportement de :focus.

    Mais malheureusement il ne s'applique pas à ma div, sur laquelle j'ai fais un effet de dépliage.

    Je vous mets la partie qui me pose problème :

    HTML :

    	<div class='actu' id='actu'>
    	<h3>Ouvrir</h3>
    	<p>test1</p>
    	<p>test2</p>
    	<p>test3</p>
    	<p>test4</p>
    	</div>


    CSS :

    .actu{
    	
        margin-top: 10px;
        max-height : 50px;
        border: 1px solid black;
        overflow: hidden;
        transition: all 0.4s
    }
    .actu:active {
        max-height: 100%;
    }



    Voilà si quelqu'un a une suggestion (je précise que j'aimerais rester en css et ne pas partir sur du JS si ce n'est pas fondamentalement indispensable^^)

    • Partager sur Facebook
    • Partager sur Twitter
      6 février 2020 à 10:49:30

      Salut,

      tu ne peux pas vraiment en CSS. il faut le faire avec javascript ou php ou autre.

      C'est extrêmement simple en JS avec l'aide de Jquery.

      Après, en CSS il y a moyen de le faire avec un input checkbox mais c'est plus de la bidouille, donc pas très propre.

      • Partager sur Facebook
      • Partager sur Twitter
      Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
        6 février 2020 à 10:54:55

        Salut, merci pour ta réponse; oui effectivement en JS c'est beaucoup plus simple, mais je me suis mis un petit défi personnel ahah. Par contre tu dis que c'est faisable en php, je suis curieuse, par quel biais ?

        Edit : ah bah en fait j'ai réussi, avec un tab index ça détecte le focus (j'aime bien réfléchir pendant 3h sans y arriver et dès qu'on pose la question ça vient xD)

        du coup :

        Html :

        <div tabindex="0" class='actu' id='actu'>
        	<h3>Ouvrir</h3>
        	<p>test1</p>
        	<p>test2</p>
        	<p>test3</p>
        	<p>test4</p>
        	</div>		 


        css :

        .actu{
        	
            margin-top: 10px;
            max-height : 50px;
            border: 1px solid black;
            overflow: hidden;
            transition: all 0.5s
        }
        .actu:focus {
            max-height: 100%;
        }



        -
        Edité par Aelya 6 février 2020 à 11:10:35

        • Partager sur Facebook
        • Partager sur Twitter
          6 février 2020 à 11:36:29

          Tu as tout ici :
          https://www.alsacreations.com/astuce/lire/28-styles-lien-page-en-cours.html

          Et juste en CSS et HTML :

          <label for="ouvrir">Ouvrir</label>
          <input id="ouvrir" type="checkbox">
          <div class="actu">
              <p>test1</p>
              <p>test2</p>
              <p>test3</p>
              <p>test4</p>
          </div>
          .actu{
               
               margin-top: 10px;
               max-height : 0;
               border: 1px solid black;
               overflow: hidden;
               transition: all 0.4s
           }
           input {
               display:none;
           }
           label {
               cursor:pointer
           }
           input:checked + .actu {
               max-height: 100%;
           }




          • Partager sur Facebook
          • Partager sur Twitter
          Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

          Modifier comportement :active

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown