[Résolu] Inversement des couleurs avec le selecteur :visited

Bonjour,

j'ai une carte de France en "svg" et j'ai découpé par régions qui sont de différentes couleurs selon les régions.
Pour exemple, les départements se trouvant dans la régions "Auvergne-Rhône-Alpes" sont en bleu foncé, j'ai mis un ":hover" en bleu un peu plus clair
voici la page où vous pouvez voir les résultats : http://www.ricem.contact/Carte_france/map_fr.html
Pour info quand on clique sur un département, il affiche les détailles sur le panneaux à droite (ou bas selon la taille de l'écran (mediaQuery) seul les 3 premiers département fonctionne pour le moment).
Mais quand je mets un ":visited" il inverse les couleurs, il mets les "visited" en bleu foncé, alors que je lui est mis en bleu clair dans le code, de plus il me mets les autres départements de la même région en bleu clair alors qu'ils devraient être en bleu foncé.
Précision, j'ai bien suivi le fameux «LoVe HAte»

.Auvergne-Rhône-Alpes {
    fill: #7ab6fa; /* couleur foncé */
    transition: fill 0.2s;}
 .Auvergne-Rhône-Alpes:visited {
    fill: #a0cbfc;} /* couleur clair */
.Auvergne-Rhône-Alpes:hover {
    fill: #a0cbfc;} /* couleur clair */

Merci.
Edit : Pour le code html, je vous mets les 3 premiers départements.

<div class="mapSVG">
<svg version="1.1" viewBox="0 0 612.4 584.4" preserveAspectRatio="xMinYMin meet">
<g>
<a class="Auvergne-Rhône-Alpes" data-value="1" xlink:title="Ain (01)">
<path d="M413.7,308.4l6.7-20.5l0.4,1.1l1.4-0.8l3,1.8l3.3-1.5l1.3,0.3l0-0.9l1.6,0.8l1.2,2.9l3.3,0.7l0,0l0.4,1.1l-1,0.9l3.2,1.9l-0.6,0.7l1.7,1.9l0,1.7l0.8-2.2l0.5,2l1.6,0l-0.8,2.5l0.7,0.6l2.7-0.2l1.1-1.6l1.2-0.1l2-2.9l0.1,1.2l2.8,0.9l0.5,2.9l6-0.2l8.1-9.1l0,0l4.4,2.9l-2.8,4.9l0.9,2l-6,2.1l-0.6,1.2l1.2,0.9l-1.6,2.9l0,0l-2.6,0.8l-0.3,2l-2.8-1.1		l-0.6,5.3l1.2,2.5l-0.2,2.1l0,0l-2.2,12.7l-1.1,1.1l-2-0.3l-0.6,4.1l-2.6,1.7l0,0l-1-2.7l-2.4-2l0.4-1l-5.4-5.7l0.3-1.8l-3.3-2.8l-2.1,2.1l-1.3,3.3l-1.9,1.4l-1.4-0.2l-1.6-2l-1.4-0.3l-0.3,0.8l-0.2-0.9l0,0l-7.6,0.6v-2.3l-1.5-3.3l-1.4-1l-1.8,1l0.2-1.4l-3.3-1.3l1-1.8l-0.3-7l2.3-3.7L413.7,308.4z" />
</a>
<a data-value="2" xlink:title="Aisne (02)" class="Hauts-de-France">
<path d="M347,70.5l3.6-1.4l0.8,1.2l2.1-0.1l1.4-1.3l5.3,1.2l2.2-2.4l2.1,0.7l0.8,1.2l1.1-0.8l0.8,0.5	l0.2-1.5l2.1-1l1.3,1.1l5.3,1l0.6,1.8l3.9-2.2l0.5,1.2l-0.6,2.1l3.4,0.6l1,1l2.3-0.7l0,0l2.1,0.6l0.1,0.9l1.5-0.2l0,0l-0.6,2.9l1.6,0.6l-0.1,2.3l-2,5.7l1.8,1.5l-2.7,3.7l-2.4,1.3l-0.5,2.9l-3.1-0.3l-0.7,1l2.3,3.2l-1.2,1.7l11,0.2l0.1,1.1l-1.6,1.1l0,2.5	l1.1,1.4l-1.3,0.5l0.4,2l0,0l-0.5,2.9l-3.2-1.1l-1.5-1.9l-2.8,1.7l-0.2,2.2l-3-0.7l-5.5,2.7l0.9,2.8l-0.6,0.9l1.1,1.2l-1,1.4l1.2,1l0.7-0.6l0.7,1.9l1.4-0.3l0,1.4l-1.8,1l-0.8-0.8l-2.7,0.2l-0.9,1.9l1.6,2.7l-2.1,1.1l-0.1,1.5l2.7-0.4l1.1,1.8l-1.5,0.6l-0.8,2.4l-1.3,0.4l0.5,1.1l-1.2,0.2l-0.1,1.6l-1.8,0.2l-1.8,3.8l0,0l-1,0.9l-0.6-1.4l-2.6-0.7l-0.6-3.5l-1.6,1.3l-1-2.6l-1.7,0.6l-0.6-2.1l-3.5-2.5l1-2.4l-1.6-2.1l0.5-1l-3.8-1.1l0,0l0.9-1.6l0.7,0.7l-0.2-1.1l1.7-0.8l-1.6-0.5l0.4-0.6l0,0l0-0.5l0,0l-0.7-0.8l-0.5,2.4l-0.2-2.1l-3.2-1.5l-0.2,1.7l1.4,0.3l-0.6,0.9l-1.2-1.6l-0.3,0.7l-0.7-0.5l-0.4-2.2l1.8-0.6l0.9,1.2l0.7-1l-0.1-3.5l-2.2-0.1	l-0.7-2.5l1.3-0.9l1.8,0.8l2.1-3.1l-0.1-3.6l3-0.4l-2.4-1.7l0.7-1.2l-1.2-1.8l1.3-0.8l0.5-3.1l-1.9-3l0.9-1.1l-0.6-1.1l1.2-0.3l-0.3-2.8l0,0l0,0l0,0l0-0.2l0,0l-0.8-3.7l-1.5-0.3l0.9-2.2l-1.3-1.7l1.2-0.6L343,79l0.5,0.9l1.3-1.2l0.1-2.6l3.3-3.8l-2-0.5L347,70.5z" />
</a>
<a data-value="3" xlink:title="Allier (03)" class="Auvergne-Rhône-Alpes">
<path d="M309.9,293.8l0.7-3l1,0l1.6-2.8l5.2-1l2.1,0.8l3.2-2.1l-0.5-2.5l-1.5-0.9l1.2-1.8l-1.1-1.2l1.5-0.8	l0.9,0.8l-0.1-1.9l3.2-1.7l0.6-1.6l0.7-0.1l1.1,1.8l1.6-1.1l2,0.5l0.1-1.2l2.9-2.9l1.8-0.7l2.8,0.6l0,0l1.1,2.6l2.9,1.4l3,3.1l2.8-2.5l1.3,0.1l0.5,1.6l1.4,0.3l1.3-1.7l1.7-0.1l1.3,1.5l-0.4,1.6l1.6,0.8l1.4-2l1.9-0.3l-0.5-2l2-0.1l0,0l-0.5-0.9l0,0l0.5-1.6l1.4,1l0,0l0.4,2.5l2.5,2.9l1,1.9l-0.3,1.1l1,0.4l0.2,3.8l2.6,1.2l1.4-0.8l1.1,2.6l3.6-0.2l0,0.9l1.9,1l-1,3.8l0.4,4.2l0.8,0.1l-0.7,0.8l-1.7-0.4l-0.1,1.3l-2,0.4l0.1,1l0,0h-0.9l0,0l-0.4,0.8l-2.7,0.2l0,1l-1.5,0.1l1.7,4.6l-0.8,0.4l0.1,2.6l1.2,1.4l-0.7,2.1l1.1,3.2l-1.8,1.5l-1.3-0.6l-0.5,1l-1.4-0.5l-0.6,2.6l0,0l-0.7-1.6l-1.8-0.2l-1.7-3.7l-5.3,0.9l-0.1-3.1l0,0h-1l0,0l-0.8-0.9l-3.6,1.7l-1.2-1.2l-7.2-0.2l-1.3-0.8l-0.3-1.9l-3.2,0.7l-1.9-1.3l-0.7-2.8l-1.6-0.4l0-2.2l1.3-1.6l-1.1-0.6l-3.6,0.2l-0.9,3l-3.2-1.6l-0.4,2.4l-2,0.6l-1.5,3.2l-3-1.5l0,0l-3.5-8.2l-2.1-1l-0.4,0.8l-1.4-2.9l-1,1.3l-2.6-2l1.3-1.6l-2-0.7L309.9,293.8z" />
</a></g></svg></div>

Modifié par ricem (19 Aug 2024 - 16:34)

Bonsoir, j'ai essayé avec

<a xlink:href="#"> 

et des

<a href="#"> 

, idem ça fait la même chose

Bonsoir,

.Auvergne-Rhône-Alpes {
    fill: #7ab6fa;
    transition: fill 0.2s;
}

/* .Auvergne-Rhône-Alpes:visited {
    fill: #a0cbfc;
} */
.Auvergne-Rhône-Alpes:hover {
    fill: #a0cbfc;
}

.Bourgogne-Franche-Comté {
    fill: #FFCCFF;
    transition: fill 0.2s;
}

Après lecture de ce code, deux choses entrent en évidence pour moi :
1. La première c'est que le seul :visited présent dans la feuille de style est commenté.
2. La deuxième est d'éviter les caractères accentués ; comme on peut le voir ici ça ne peut être que source de bugs.