1 pièce(s) jointe(s)
Modifier un élément parent au survol
Bonjour à tous,
J'ai un petit souci en CSS. Voici ma mise en page (simplifiée) :
Code:
1
2
3
4
5
6
7
8
|
<div class="article_accueil">
<div class="image_accueil">
<a href="..."><img src="..." /></a>
</div>
<a class="titres_accueil" href="...">lien</a>
<div class="bas_titres_accueil"></div>
</div> |
Sur la capture ci-dessous, l'image (chat) est donc cliquable, de même que l'image en-dessous ("article image petite").
Pièce jointe 285596
L'image est grisée par un filtre en CSS.
Au survol de l'image : l'image perd son filtre, et j'agis également sur le lien en-dessous dont le background change de couleur :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.image_accueil:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
}
.image_accueil:hover ~ a.titres_accueil {
background-color: #fead2d;
} |
En revanche, l'inverse ne fonctionne pas : en survolant "article image petite", le background change de couleur, mais l'image reste grisée, malgré le code CSS suivant :
Code:
1
2
3
4
5
6
7
8
|
a.titres_accueil:hover ~ .image_accueil {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
} |
Je ne sais pas d'où vient le problème (peut-être l'ordre des éléments dans le HTML ?)...
Quelqu'un aurait-il une solution ?
Merci d'avance :)
