Change la couleur du texte au survol de l'image

Bonsoir, je voudrais faire changé la couleur du cadre de l'image et du texte en dessus au survol de l'image.

Sa marche bien pour l'image mais pas pour le texte

<div id="ensemble">
<div id="image"><img src="./mini/dssfd.jeg"></div>
<div id="nom">dssfg.jpg</div>
</div>

#ensemble {display: inline-block;}
#image {margin: 10px; padding: 10px; background-color: #fff; border: 2px solid #fc1109; border-radius: 10px; box-shadow: 1px 1px 10px #aaa;}
#nom {text-align: center; font-weight: bold;}
#image:hover {border: 2px solid #cc04c2;}
#nom:hover {color: #cc04c2;}

Modifié par stephcache (03 Nov 2011 - 21:08)

Salut,

Et si tu appliquais la pseudo-classe :hover à l'élément div qui est l'ancêtre commun de ton image et de ton texte (dans ce cas, il faudra modifier les règles CSS gérant les effets de survol, de façon à cibler l'élément img et l'élément div contenant le texte en tant que descendants de l'élément div se faisant appliquer la pseudo-classe :hover) ?
Modifié par Victor BRITO (03 Nov 2011 - 21:42)

Bonsoir,

Voici un code qui donne l'effet désiré. Je me suis permis un balisage plus épuré.

HTML :

<div>
	<img src="image.jpg" alt="Image">
	<p>image.jpg</p>
</div>

CSS :

body, p {
	margin: 0;
	padding: 0;
}

div {
	margin: 10px;
	padding: 10px;
	display: inline-block;
	background-color: #efefef;
	text-align: center;
}

img {
	padding: 10px;
	background-color: #fff;
	border: 2px solid #fc1109;
	border-radius: 10px;
	box-shadow: 1px 1px 10px #aaa;
}

p {
	font-weight: bold;
}

img:hover {
	border-color: #cc04c2;
}

img:hover + p {
	color: #cc04c2
}

Voici l'image pour tester le bout de code ci-dessus :


On utilise le sélecteur CSS d'adjacence + : img:hover + p. Ce sélecteur se lit de droite à gauche : "on applique les déclarations qui suivent à tout paragraphe qui suit immédiatement une image survolée".

Du coup cela ne marchera pas si les deux éléments ne se suivent pas, auquel cas il faudra se tourner vers des sélecteurs CSS3 ou plus simplement de déclencher l'effet au survol de la <div> conteneur et pas seulement de l'image.

J'en profite aussi pour partager un lien très intéressant de Pompage qui parle des listes de définition (balise <dl>) qui pourraient être plus adaptées à ce type de structure d'un point de vu sémantique.

Merci à toi sa marche bien mais j'ai un peut modifié ton code
Modifié par stephcache (03 Nov 2011 - 22:04)