Discussion :

[SimFaridas]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[mathieu]

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

[SimFaridas]

non il est a part

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Invité]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SimFaridas]

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

[Invité]

Dans cet ordre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 : ~

[SimFaridas]

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 ?

[SimFaridas]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Invité]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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