[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)

Bonjour,

as-tu essayé avec des liens hors SVG qui auraient eux un attribut href ?
Ou déjà dans le SVG avec un attribut xlink:href
Vu sur MDN :visited :

MDN a écrit :
The :visited pseudo-class applies only to <a> and <area> elements that have an href attribute.

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.

Bonjour Olivier C,
j'ai rectifié le nom des régions concernées (d'habitude j'y prête intention, pas cette fois-ci) , mais cela ne change rien, et le :visited est commenté car pour le moment il ne fonctionne pas comme je le veux

J'ai fais un CodePen pour que l'on y voit plus clair : CodePen.

L'attribut de version (version="1.1") ne sert à rien. Et, contrairement à ce que je croyais, l'attribut xmlns="http://www.w3.org/2000/svg" est lui aussi facultatif pour un SVG en ligne.

Comme quoi ça sert à quelque chose de répondre aux questions des gens car on apprend des trucs soi-même.
Modifié par Olivier C (20 Aug 2024 - 16:24)

J'ai repris ton code codepen en rajoutant le # dans tous les href, mais ça fait pareille il mets en visited sur toute la région et non juste sur le département visité, j'ai recréée un codepen où tout les liens sont avec les #:
https://codepen.io/ricem/pen/vYqRBdX?editors=1100 tu pourras voir.

Bonjour,

href="#" sur tout les liens rend tous ces liens identiques, donc soit tous visités ou pas. Chaque lien doit indiquer une ancre différente pour qu'ils soient indépendamment pris en compte.

Cdt

gcyrillus a écrit :
Bonjour,
href="#" sur tout les liens rend tous ces liens identiques, donc soit tous visités ou pas. Chaque lien doit indiquer une ancre différente pour qu'ils soient indépendamment pris en compte.
Cdt

Bonjour...
...Oups, je me disais bien qu'il y avais un truc comme ça et du coup comment je les selectionnent, vu qu'il vont nul part ?

gcyrillus a écrit :
href="#" sur tout les liens rend tous ces liens identiques, donc soit tous visités ou pas. Chaque lien doit indiquer une ancre différente pour qu'ils soient indépendamment pris en compte.

Mon Dieu, la réponse était si évidente ! Bien vu.

Olivier C a écrit :

Mon Dieu, la réponse était si évidente ! Bien vu.

J'en ai presque honte
Modifié par ricem (20 Aug 2024 - 20:32)