28217 sujets

CSS et mise en forme, CSS3

Interaction entre deux blocs au survol

Bonjour,
Question toute bête mais à laquelle je n'ai pas encore su trouver une réponse:
Je possède un bloc de type menu vertical suivi horizontalement par un autre bloc image.
Mon interrogation porte sur la syntaxe à suivre en CSS3 afin d'indiquer le changement d'image (contenue dans le bloc "#img" mitoyen du bloc "#menu") au survol d'une des lignes du menu parcourue.
Alors j'imagine que cela relève d'un attribut unique pour chaque ligne mais je ne sais pas très bien comment implémenter ensuite l'ordre au niveau du CSS.
PS: j'ai volontairement remplacé les images en background par des couleurs, par souci pratique.


<!DOCTYPE html>
	<link rel="stylesheet" href="style.css">

<div id="menu">
	<ul>
	<li id="li1">produit 1</li>
	<li id="li2">produit 2</li>
	<li>produit 3</li>
	<li>produit 4</li>
	<li>produit 5</li>
	</ul>
</div>

<div id="img">
</div>



#img{
display:inline-block;
vertical-align:top;
height:25em;
width:60%;
border: 1px solid black;
background-color:red;
}

li#li1:hover > img{
background-color:green;}
li#li2:hover > img{
background-color:blue;}


Voilà, je vous remercie par avance pour vos précieux conseils!
salut,
il ne te sera pas trop possible en CSS d'accéder à ton bloc .img au survol de tes li.
Avec ce que tu as écris (li#li1:hover > img), tu es entrain de demander au navigateur de changer la couleur de fond d'une balise <img>, enfant directe d'une balise <li> ayant comme ID "li1" au survol de cette dernière.
Avec ta structure HTML, le mieux que tu puisses faire est d'atteindre ton bloc #img au survol de #menu mais sans savoir quelle li est survolée.
En gros, si tu veux atteindre un élément B au survol d'un élément A qui n'est ni enfant, ni frère de l'élément A, tu dois passer par JS. La meilleure solution reste d'adapter ta structure HTML pour que ton bloc #img puisse être soit enfant, soit frère de tes <li>.
Sujet clos
Aller à