Discussion :

[barale61]

Bonjour,

Je suis en train d'essayer de reproduire une maquette photoshop et je souhaiterais rendre cliquable une icône (ou du texte) placé dans une classe:before est-ce possible ?

exemple:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
 .music:before {
        content: '+'; 
        font-size: 24px;
        margin-top: -10px;
        padding-left: 15px;
        padding-right: 5px;
        border-left: 1px solid #333;
        padding-top: 5px;
        padding-bottom: 5px;
        float: right;
    }

Je souhaite donc qu'en cliquant sur le + mon sous-menu s'affiche mais je ne sais pas comment faire pour solliciter mon +.
Je sais afficher mon menu mais pas solliciter le +.
Je vous remercie de votre aide.

[SpaceFrog]

css ne possède pas d'evènement click

il faut passer par du javascript avec previousSibling(), ou plus simplement avec JQuery et .prev()

[NoSmoking]

Bonjour,
les pseudos éléments :before/:after n'appartiennent pas au DOM et sont purement décoratifs.

Il te faut donc créer ton propre élément cliquable ou éventuellement mettre l'écouteur sur le conteneur et tester la position du clic.

[barale61]

Ça veut dire que je ne pourrait pas changer la valeur de mon :before au clic ?

[SpaceFrog]

si mais pas avec le :before directement
il faut rajouter un class

http://fiddle.jshell.net/wmhe49xs/1/

[melka one]

jour

plutôt comme ça

http://fiddle.jshell.net/wmhe49xs/2/