Changer un élément sans l'utiliser dans le CSS

Bonjour à tous
Je ne savais pas comment appelé ce sujet mais en gros ce que j'aimerai faire c'est changer un élément de couleur grâce au CSS sans passer par le nom de cet élément
exemple :

Code:

---

1 2 3 4 5 6 7 8

.st0:hover{ fill: #353Bd2; }   text:hover{ .st0 : fill:#353Bd2; }

---

La j'aimerai changer la couleur de l'élément st0 en le survolant et en survolant le text, ext ce que c'est possible ?

merci d'avance :merci:

est ce que l'élément text concerné est inclus dans l'élément ".st0" ?

non il est a part

Code:

---

1 2 3 4

<path class="st0" d="M174,1038.5h-15.5c-4.1,0-7.5-3.4-7.5-7.5v-25c0-4.1,3.4-7.5,7.5-7.5H174c4.1,0,7.5,3.4,7.5,7.5v25 C181.5,1035.1,178.1,1038.5,174,1038.5z"/> <text transform="matrix(1 0 0 1 50.4775 1176.1666)" class="st1 st2">1</text>

---

Bonjour,

dans l'acronyme CSS, il y a le C pour "Cascade".
Donc, en descendant.

Dans ton code, l'élément de classe "st0" est placé AVANT le <text>.
Donc, ça ne va pas. On ne peut pas remonter la cascade.

Si les éléments était placés dans l'ordre inverse, on aurait pu écrire :

Code:

---

1 2 3

.st0:hover, text:hover + .st0 { fill:#353Bd2; }

---

Que veut tu dire par si les éléments était placés dans l'ordre inverse ? quels éléments ?

Dans cet ordre :

Code:

---

1 2 3

<text transform="matrix(1 0 0 1 50.4775 1176.1666)" class="st1 st2">1</text>   <path class="st0" d="................"/>

---

• CSS - Sélecteur de voisin direct : +
• CSS - Sélecteurs de voisins généraux : ~

Citation:

---

Envoyé par jreaux62

Dans cet ordre :

---

Il m'arrive juste un problème bizarre, le texte est passé derrière le path et je ne le vois plus
Ce qui veut dire qu'il n'y aurait aucun moyen ?

J'ai put trouver un moyen de contourné le problème
code CSS :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.st0{ fill: #a4ced2; transition : fill 0.3s; opacity: 0.01; }   .st0:hover{ fill:#353Bd2; opacity: 0.8; }   .st02{ fill: #a4ced2; transition : fill 0.3s; stroke:#000; }

---

Le code html :

Code:

---

1 2 3 4

<path class="st02" d="........."/> <text transform="matrix(1 0 0 1 50.4775 1176.1666)" class="st1 st2">1</text> <path class="st0" d="........."/>

---

en gros étant que le hover sur l'élément en premier plan, j'ai mis le path st0 en premier plan mais en transparence(0.01) ensuite le texte puis de nouveau le même path sauf que je l'ai renommer en class : st02 et avec le CSS je le met de la couleur que je veux.
Comme ca quand je passe ma souris je change juste le path du premier plan

En tout merci pour vos réponses

A priori, on doit pouvoir s'en sortir avec un <div> englobant (mais je ne connais pas la syntaxe que tu utilises) :

Code:

---

1 2 3 4

<div class="machin"> <text transform="matrix(1 0 0 1 50.4775 1176.1666)" class="st1 st2">1</text> <path class="st0" d="........."/> </div>

---

Code:

---

div.machin:hover text, div.machin:hover .st0 {...}

---

Bonjour,
il existe la balise <g> pour faire un regroupement.

Code:

---

1 2 3

g:hover element{ /* on fait ce qu'il y a à faire */ }

---