Deux hover en même temps

Bonjour,

J'ai un texte et une image. Actuellement :

- Lorsque je survole le texte, le hover du texte s'active
- Lorsque je survole l'image, le hover de l'image s'active

J'aimerai en fait pouvoir avoir les deux hover en même temps lors du survol de l'un ou l'autre. Est-ce possible ?

Merci beaucoup

Salut,

puisque tu veux un effet de hover on peut supposer (bien obligés puisque tu ne nous donnes aucun code html) qu'il s'agit d'un lien. Du coup il suffit de faire :

a img {
	border: 3px solid yellow;
}
a:hover {
	color: green;;
}
a:hover img {
	border-color: red;
}

<p><a href="./">Lorem ipsum <img src="http://www.alsacreations.com/css/img/logo-alsacreations-com.png" alt="Alsa" /></a></p>

S'il ne s'agit pas d'un lien il faut en premier lieu vérifier que ce ne sera pas perturbant pour le visiteur car l'effet hover donne envie de cliquer et si ça n'est pas le cas tu peux faire :

#survol img {
	border: 3px solid yellow;
}
#survol:hover p {
	color: green;;
}
#survol:hover img {
	border-color: red;
}

<div id="survol">
	<p>Lorem ipsum</p>
	<img src="http://www.alsacreations.com/css/img/logo-alsacreations-com.png" alt="Alsa" />
</div>

Bonjour,

Sinon, pour des raisons d'intéropérablité et/ou d'accessibilité (si tu remplace l'image par exemple), il existe JacaScript aussi.

C'est pour un lien merci ça fonctionne

Par contre, au niveau référencement c'est identique ou pas ?

Cela me donne :

<a href="#" rel="bookmark" title=""><h2>Mon titre 2</h2><img src="image.jpg" alt="" /></a>

à la place de :

<a href="#" rel="bookmark" title=""><h2>Mon titre 2</h2></a><a href="#" rel="bookmark" title=""><img src="image.jpg" alt="" /></a>

newty a écrit :
Par contre, au niveau référencement c'est identique ou pas ?

Euh... pas compris le rapport avec le référencement.

Quoi qu'il en soit ton code est invalide puisqu'un lien ne peut pas contenir d'élément de type bloc. Il faut donc faire :

<h2><a href="#">Mon titre 2 <img src="image.jpg" alt="" /></a></h2>

ok, je vais modifier ça

Pour l'histoire du référencement, on passe de 2 (h2 + image) à 1 lien (h2 et image) donc je me demande si cela à une importance

Absolument aucune incidence.

ok

Ah par contre, j'ai mis un text-decoration:underline; sur le h2 (pour le texte) mais ça se met également sur l'image. Comment y remédier ? Un span sur le texte ?

Laurie-Anne, je ne veux pas te contredire mais il faut dire du mal de IE6 mais également du 7 et du 8 :-p. Le 9, ça devrait à peu près aller :d