Discussion :

[Msieurduss]

Bonjour à tous,

J'ai un petit souci en CSS. Voici ma mise en page (simplifiée) :

Code :

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

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").



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 :

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

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 :

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

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