Aspect au survol des liens différent selon les boites

Bonsoir,

pour modifier l'aspect de mes liens au survol de la souris:
a:hover { text-decoration:none;font-weight:bold; color:#ECCE86;}

mais ceci modifie de façon identique l'aspect des liens de TOUTE LA PAGE

Pour des raisons graphique j'ai besoins que la couleur d'un lien survolé particulier (situé dans une box)
soit différente de celle des autres. Y a-t-il un moyen de faire ??? redéfinir le "a:hover" au sein de la déclaration de la boite ?

A+
Philippe

Salut,

Tout dépend comment ta page est codée, mais ceci est une possibilité :

<style>
#boxA a {color: black;}
#boxA a:hover {color: grey}
#boxB a {color: rouge;}
#boxB a:hover {color: orange}

</style>
(...)

<div id="boxA">
<p><a href="page1.html">Liens vers la page 1</a></p>
</div>

<div id="boxB">
<p><a href="page2.html">Liens vers la page 2</a></p>
</div>

Après tu peux mettre des classes sur certains liens, mais c'est plus lourd sur le code html, surtout quand il y a beaucoup de liens.

Un peu de lecture : Comment définir l’apparence de ses liens?

En fait il te suffit juste d'user des bon sélecteurs avec les éléments, identifiants et classes bien choisis pour faire ce que tu veux.

Un peu de lecture encore sur les sélecteurs :
Les sélecteurs (Yoyodesign)
CSS 2.1 selectors (écrit par Roger Johansson et traduit par Floatthatbox)
Modifié par Mikachu (19 Jan 2010 - 18:22)

Merci pour cette réponse rapide, voici ce que j'avais fait "d'instinct":

.boitegauche{
float:left;
width: 29%;
height:500px;
background-position: top right;
background-image:url("fondinfo2.jpg");
padding-left:2em;
padding-right:2em;
text-align:center;
font-family:arial;
font-size: 0.8em;
a:hover { text-decoration:none;font-weight:bold; color:#000000;}
}

mais çà ne fonctionne pas le lien situé dans la boite:

<div class="boitegauche">blablabla
<a href=#>Nous localiser</a></div>

reste conforme à la couleur définie pour les liens de la page... Où est le prob. ??

A+
Philippe

J'ai suivi tes conseils:

.boitegauche{ 
float:left; 
width: 29%; 
height:500px; 
background-position: top right; 
background-image:url("fondinfo2.jpg"); 
padding-left:2em; 
padding-right:2em; 
text-align:center; 
font-family:arial; 
font-size: 0.8em; }

.boitegauche a:hover { text-decoration:none;font-weight:bold; color:#BBBBBB;}

et ça marche Nickel, merci.

Maintenant juste pour apprendre, si j'ai dans la même boite 2 liens pour lesquels je désire un aspect différent ? cela est-il possible?

A+
Philippe

Bonsoir,

Oui, c'est tout à fait possible si tes boites sont représentées par des ID et tes liens par des Classes… (à condition qu'il n'y ait qu'une seule représentation de chacune des boites par page, sinon utiliser plusieurs classes).

Imaginons 2 sortes de liens, premièrement ceux qui sortent du site et secondement ceux qui sont internes au site… ils peuvent se trouver présents, selon la circonstance, indifféremment dans chacun des blocs. Justement, tu vas pouvoir apprécier le principe des Cascades… ce qui donne un truc du genre : (très simplifié)

#bloc_1 a.externe, #bloc_2 a.externe, bloc_3 a.externe {color:blue}
#bloc_1 a.interne, #bloc_2 a.interne, bloc_3 a.interne {color:red}

Ça nous donne dans la langue de Voltaire :
- Si un lien de classe externe est situé dans un bloc identifié comme "bloc_1", "bloc_2" ou "bloc_3" il sera bleu.
- Si un lien de classe interne est situé dans un bloc identifié comme "bloc_1", "bloc_2" ou "bloc_3" il sera rouge.
- Tous les autres liens non affublés d'une classe porterons les attributs par défaut.
- Selon cet exemple : si le lien de classe interne ou externe est situé ailleurs que dans un "bloc_1", "bloc_2" ou "bloc_3", il portera (aussi) les attributs par défaut.

Moi, je trouve que c'est cool les CSS !
Modifié par Aureance (19 Jan 2010 - 20:27)