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.
Voilà, je vous remercie par avance pour vos précieux conseils!
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!