28217 sujets

CSS et mise en forme, CSS3

Modifier le style d'un élément en fonction du survol d'un autre

Bonjour à tous,
Ben oui, résumer ma question en une phrase n'était pas facile, ce qui ne facilite pas mes recherches Google..

donc : j'ai un menu avec des liens rouges
je voudrais que, lorsqu'on survole un lien, ceux du dessous non sélectionnés deviennent gris.

... et tout ça en css, et compatible explorer Smiley langue !!

auriez-vous une direction à me conseiller, un tuto, un bout de code ?

' vous remerciant,

Eliza
Bonjour gc, et merci de ta réponse,

j'ai étudié ta piste et suivi le lien.
ça s'approche de ce que je veux faire, mais je n'arrive pas à modifier ce code pour l'adapter.
Dans mon cas je souhaite que les liens non sélectionnés changent de couleur lorsqu'un lien a été choisi. dans l'idéal j'aimerai que le lien cliqué reste rouge, et que les autres restent gris.
voici un code qui ne fait pas ce que je souhaite mais qui place un fond de la couleur souhaitée pour le texte. font-color semble ne pas fonctionner...

<style>
body {margin: 0;padding: 0; font-weight: 300; font-color:#000000; }
a:link {
	text-decoration: none;
}
ul:hover li {
  background:gray;
  font-color:#dadadb;
}
ul:hover li:hover {
  background:red;
  font-color:#ae1922;
}
li:hover ~li {
 background:gray;
  font-color:#dadadb;
  }
</style>
</head>
<body>
<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Clients</a></li>
        <li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Clients</a></li>
</ul>

</body>


un coup de pouce..? Smiley lol
ce n'est pas font-color mais color, ensuite il te faut appliqué color au lien qui a une couleur bleue par defaut et pas seulement li.
li:hover ~li {
 background:gray;
  }
li:hover ~li  a{
  color:#dadadb;
  }

Modifié par gc-nomade (26 Mar 2014 - 17:07)
Re,

j'avance,
j'ai enlevé les "background" car c'était juste pour l'exemple.
grâce à tes explications j'ai la bonne couleur sur les points, par contre, pour les liens, tout ceux qui sont au dessus de ma sélection restent rouge, ceux qui sont en dessous sont bien gris. mon souhait final serait que seule ma sélection soit rouge, et les liens dessus comme dessous soient gris.

les points devant les liens font exactement ce qu'il faut Smiley ohwell
j'y suis presque...

<style>
a:link {
	text-decoration: none;
	color:#ae1922;
}
ul:hover li {
  color:#dadadb;
}
ul:hover li:hover {
  color:#ae1922;
}
li:hover ~li {
  }
  li:hover ~li  a{
  color:#dadadb;
  }
</style>
</head>
<body>
<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Clients</a></li>
        <li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Clients</a></li>
</ul>

</body>
même solution, le lien a une couleur par défaut, tu dois le cibler aussi .
je survole ul : touts les liens par prennent cette couleur
ul:hover li a {
  color:#ae1922;
}

je survole un li :
tout les liens par défaut ont cette couleur, ainsi que ceux se trouvant dans les li aprés celle que je survole .
ul li a ,
ul  li:hover ~ li  a{
  color:#dadadb;
  }


Il est important que tu apprennes a utiliser les selecteurs, ainsi que le poids, priorité qu'ils peuvent avoir rapports aux autres de ta feuille de style.

++
Sujet clos
Aller à