Rendre cliquable un élément :before

Résolu/Fermé

barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 - Modifié par barale61 le 28/09/2015 à 18:58
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 - 2 oct. 2015 à 19:20

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:

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

A voir également:

Rendre cliquable un élément :before
Rendre un fichier moins volumineux - Guide
Pdf element - Télécharger - PDF
Element introuvable impossible de supprimer - Guide
Rendre lisible texte flou en ligne - Forum Logiciels
Comment rendre inutilisable un téléphone portable ✓ - Forum Matériel & Système

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
Modifié par Pitet le 29/09/2015 à 15:44

Salut,

La pseudo-classe before permet seulement d'ajouter du contenu (via la propriété content), mais ce contenu ne peut pas être une balise html donc il n'est pas possible de le rendre cliquable.

Tu peux par contre encapsuler ton élément .music dans une balise cliquable, le contenu ajouté avec before sera donc lui aussi cliquable, par exemple :

<a href="#" class="music">Musique</a>
<!-- ou -->
<a href="#"><div  class="music"></div></a>
<!-- ou -->
<button class="music">Musique</button>
<!-- ou -->
<button><div  class="music"></div></button>

Bonne journée

Réponse 2 / 2

barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 110
2 oct. 2015 à 19:20

Merci pour vos réponses j'ai donc fait:

function sous_menu() {
    var sous_menu = document.getElementById('sous_menu');
    var btn_plus = document.getElementById('btn_plus')
    var btn_moins = document.getElementById('btn_moins')
 
    if (sous_menu.style.display == 'none' ||  sous_menu.style.display == '') {
                sous_menu.style.display = 'block';
                btn_plus.style.display = 'none';
                btn_moins.style.display = 'block';
            }
    else {
                sous_menu.style.display = 'none';
                btn_plus.style.display = 'block';
                btn_moins.style.display = 'none';
            }
        }

Discussions similaires

Comment "inspecter l'élément" sur Mac ?

Image cliquable dans html

Supprimer élément photo qui cache un texte ?

Impossible de copier car cet élément est trop volumineux

Comment inspecter l'élément sur mobile ?

Discussions similaires

Newsletters