Faire apparaître un surlignage d'une div au click

Résolu/Fermé
Namhto - 14 déc. 2015 à 15:43
patricia@84 Messages postés 106 Date d'inscription vendredi 27 novembre 2015 Statut Membre Dernière intervention 24 septembre 2023 - 15 déc. 2015 à 09:03
Bonjour,

Je voudrais que au clic ou au survol (active ou hover donc) d'une div (en fait c'est une balise <a> mais qui se comporte comme une div), je fasse apparaître un surlignage verticale à gauche.

Je voudrais en fait faire apparaître une petite bande de couleur à gauche pour bien montrer quel lien on pointe.

Concrètement je voudrais l'effet que vous voyez sur cette capture

http://www.hostingpics.net/viewer.php?id=915074Sanstitre.png

Mon code HTML :

<div class="projetNav">
<div class="projetName">RETER Application</div>
<div class="blank"></div>
<div class="projetGestion">
<a href="" class="dashBord">Tableau de bord</a>
<a href="" class="createTicket">Déposer une nouvelle demande</a>
<a href="" class="newTicket">Nouvelles demandes</a>
<a href="" class="historique">Historique des demandes</a>
</div>
</div>


Mon code CSS :

/*======= Navigation Projet =======*/

.projetName {
height: 50px;
line-height: 50px;
padding: 15px;
background-color: #1E2124;
}

.blank {
height: 30px;
}

/**********************************/

.projetGestion {
height: 100%;
}
.projetGestion a {
display: block;
text-decoration: none;
}
.projetGestion a {
height: 30px;
line-height: 30px;
padding: 15px;
color: #FFF;
}
.projetGestion a:hover, .projetGestion a:active{
background-color: #1E2124;
text-decoration: none;
color: #FFF;
}


Voila le rendu actuel de mon site :
http://www.hostingpics.net/viewer.php?id=366538actuel.png


Et voila ce que je voudrais :
http://www.hostingpics.net/viewer.php?id=202126objectif.png


Merci beaucoup pour votre aide !
A voir également:

1 réponse

patricia@84 Messages postés 106 Date d'inscription vendredi 27 novembre 2015 Statut Membre Dernière intervention 24 septembre 2023 9
15 déc. 2015 à 09:03
Bonjour,

Avez-vous essayé, tout bêtement, d'ajouter une border-left à votre ".projetGestion a:hover, .projetGestion a:active" ?
1