[Résolu] Ne pas avoir de hover sur un lien d'un menu

Bonjour,

Tous les liens de mon menu sont soulignés au passage de la souris.

J'essaye que mon le lien id="first" ne se souligne pas en passant la souris dessus.

J'ai essayé de faire :

#first a:hover {
text-decoration: none;
}

mais cela n'a aucun effet...

par contre, j'ai bien réussi à mettre #first en gras...

voici mon xhtlm

<div id="acces_pagesbas">
<ul id="pagesbas">
<li><a id="lastpage" title="dernière page" ref="collections-page5.htm">>></a></li>
<li><a title="page suivante" href="collections-page5.htm">></a></li>
<li><a title="page 5" href="collections-page5.htm">5</a></li>
<li><a title="page 4" href="collections-page4.htm">4</a></li>
<li><a title="page 3" href="collections-page3.htm">3</a></li>
<li><a title="page 2" href="collections-page2.htm">2</a></li>
<li><a id="first" title="page 1" href="#">1</a></li>
</div>

et ma CSS

#acces_pages {
position: absolute;
top: 10px;
right: 35px;
line-height: 20px;
}
#pages {
list-style-type: none;
width: 100%;
line-height: 20px;
}
#pages li {
float: right;
}
#pages a {
float: left;
color:#666;
text-decoration: none;
text-align: center;
line-height: 12px;
}
a#lastpage {
letter-spacing:-1px;
padding-left: 3px;
}
#pages a{
width: 10px;
color:#666;
text-decoration:none;
}
a#first {
font-weight: bold;
}
#pages a:hover{
color:#6C3089;
text-decoration:underline;
}
#pages a:focus{
text-decoration:underline;
color:#999;
}
#pages a:active{
text-decoration:underline;
color:#999;
}

Modifié par pp51 (05 Jul 2006 - 19:38)

Salut,

As tu déclaré les différents états de tes liens dans l'ordre ?
Il y'a un ordre précis pour le faire, facile à retrouver gràce à un moyen mnémotechnique :
"LoVe HAte" ce qui dans l'ordre donne : Link Visited Hover et Active
Tes déclarations dans ta CSS sont elles faites dans cet ordre ?

Mikachu a écrit :
As tu déclaré les différents états de tes liens dans l'ordre ?
Il y'a un ordre précis pour le faire…

Je crois que ça n'a rien à voir. Il semblerait plutôt qu'il s'agisse d'une erreur de sélecteur CSS.

#first a:hover {
	text-decoration: none;
}

Avec ce code, les liens (éléments a) dont le parent ou un des éléments ancêtres (parent du parent, parent du parent du parent, etc.) a pour identifiant "first" ne seront pas soulignés au survol.

Si tu as le code HTML suivant :

<a href="…" id="first">Bla bla bla</a>

Alors le sélecteur CSS correspondant est le suivant :

a#first:hover

(sans espaces, sinon ça n'est pas le même sélecteur, l'espace étant un opérateur !)

moi je vois dans l'HTML qu'il manque le </ul> ...

Merci mpop

C'était effectivement ça.

Je ne connaissais pas le css: a#first:hover... je vais reprendre mes bouquins sur css.

En tout cas merci beaucoup

optyler a écrit :
moi je vois dans l'HTML qu'il manque le </ul> ...

exact, optyler, erreur de copier/coller

Bonsoir,

Je réouvre ce topic

Grâce aux conseils avisés de mpop, j'avais finalement réussi à obtenir le résultat voulu.

J'ai cependant dû revoir mon menu, et plutôt utiliser des class que des id...

Je veux donc toujours que le "1" du menu soit en gras et en violet, sans hover lors du passage de la souris.
Tous les autres liens seront en gris et un hover en violet.

Voilà mes problèmes:
1/ le lien "1" (class="selected") du menu s'affiche bien en gras, mais par contre la couleur violet n'est pas prise en compte. C'est le gris qui s'affiche...
2/ j'ai un hover qui s'affiche en passant la souris sur le "1", alors qued justement ce n'est pas mon souhait.

Si vous avez des pistes... merci à tous.

Mon XHTML

<div id="acces_pages">
<ul id="pages">
<li><a class="lastpage" title="dernière page" href="collections-page5.htm">>></a></li>
<li><a title="page suivante" href="collections-page2.htm">></a></li>
<li><a title="page 5" href="collections-page5.htm">5</a></li>
<li><a title="page 4" href="collections-page4.htm">4</a></li>
<li><a title="page 3" href="collections-page3.htm">3</a></li>
<li><a title="page 2" href="collections-page2.htm">2</a></li>
<li><a class="selected" title="page 1">1</a></li>
<li><a title="page précédente" href="collections-page1.htm"><</a></li>
<li><a class="firstpage" title="premiere page" href="collections-page1.htm"><<</a></li>
</ul>
</div>

et ma CSS

#acces_pages{position:absolute;top:10px;right:35px;line-height:20px;}
#pages{list-style-type:none;width:100%;line-height:20px;}
#pages li{float:right;}
#pages a{float:left;text-align:center;line-height:12px;width:10px;color:#666;text-decoration:none;}
#pages a:hover{text-decoration:underline; color:#6C3089;}
a.lastpage{letter-spacing:-1px;padding-left:3px;}
a.selected{font-weight:700;color:#6C3089;text-decoration:none;}
a.selected:hover{text-decoration:none;}
a.firstpage{letter-spacing:-1px;padding-right:4px;}

Bonjour,

As tu essayé li a.firstpage{letter-spacing:-1px;padding-right:4px;...} ?

C'est un point qu'il faudrait que je révise, mais il me semble que les sélecteurs les plus précis ont la priorité sur ceux qui sont plus vagues (de quelle manière exactement, je ne sais plus).

Dans ton cas, tu commences par écrire :

#pages a {bla: bla;}
#pages a:hover {bla: bla;}

Je pense que si tu veux que des propriétés données pour un lien qui soit un descendant de #pages et qui porte la classe "selected", il faut l'indiquer ainsi :

#pages a.lastpage {bla: bla;}
#pages a.selected {bla: bla;}
#pages a.selected:hover {bla: bla;}
#pages a.firstpage {bla: bla;}

Sinon, les propriétés qui ne sont pas contredites dans #pages a sont prises en compte, mais celles qui sont contredites gardent les valeurs données avec le sélecteur plus spécifique.

Enfin j'ai déjà remarqué ce phénomène, mais j'avoue que je n'ai pas la référence sous la main. Il va falloir que je me replonge dans la spécification.

Bonjour,

a écrit :

As tu essayé li a.firstpage{letter-spacing:-1px;padding-right:4px;...} ?

Cela n'a pas l'effet escompté

Je pensais que le code

a.selected{font-weight:700;color:#6C3089;text-decoration:none;}
a.selected:hover{text-decoration:none;}

serait efficace mais non
Modifié par pp51 (05 Jul 2006 - 19:29)

mpop a écrit :
C'est un point qu'il faudrait que je révise, mais il me semble que les sélecteurs les plus précis ont la priorité sur ceux qui sont plus vagues (de quelle manière exactement, je ne sais plus).

Dans ton cas, tu commences par écrire :

#pages a {bla: bla;}
#pages a:hover {bla: bla;}

Je pense que si tu veux que des propriétés données pour un lien qui soit un descendant de #pages et qui porte la classe "selected", il faut l'indiquer ainsi :

#pages a.lastpage {bla: bla;}
#pages a.selected {bla: bla;}
#pages a.selected:hover {bla: bla;}
#pages a.firstpage {bla: bla;}

Sinon, les propriétés qui ne sont pas contredites dans #pages a sont prises en compte, mais celles qui sont contredites gardent les valeurs données avec le sélecteur plus spécifique.

Enfin j'ai déjà remarqué ce phénomène, mais j'avoue que je n'ai pas la référence sous la main. Il va falloir que je me replonge dans la spécification.

Quelle star ce mpop

Effectivement, cette syntaxe css permet d'avoir le rendu escompté.
Mpop, j'en profite pour te demander si tu connais un site/livre qui détaille les syntaxes css ? Sauf si je ne me trompe, le livre de Raphael ne traite pas ces points précis.

Encore merci !

Alors voilà, j'ai parcouru la spécification CSS 2.1. Chou blanc dans le chapitre sur les sélecteurs, mais celui sur la Cascade est déjà plus proche de ce qu'on cherche. En particulier le passage suivant :

a écrit :
A selector's specificity is calculated as follows:

* count 1 if the selector is a 'style' attribute rather than a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
* count the number of ID attributes in the selector (= b)
* count the number of other attributes and pseudo-classes in the selector (= c)
* count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

Source : CSS 2.1 – 6.4.3 Calculating a selector's specificity

En suivant ce modèle, prenons les trois sélecteurs suivants :

#pages a
a.selected
#pages a.selected

On a les spécificités suivantes :

#pages a (0,1,0,1)
a.selected (0,0,1,1)
#pages a.selected (0,1,1,1)

#pages a.selected est donc plus spécifique que #pages a qui est lui-même plus spécifique que a.selected.

CQFD.

Ben j'aurai appris quelque chose aujourd'hui.

pp51 a écrit :
Mpop, j'en profite pour te demander si tu connais un site/livre qui détaille les syntaxes css ? Sauf si je ne me trompe, le livre de Raphael ne traite pas ces points précis.

Heu… qui les détaille vraiment ?
La spécification CSS fait ça, mais c'est parfois un peu obscur (ça dépend du concept abordé, il y en a des plus faciles que d'autres).

Sinon, il y a pas mal de petites documentations, mais sur ce point précis je ne sais pas trop. Suivant le niveau de détail recherché, des sites d'introduction comme Openweb peuvent être pas mal.

Ah ben tiens, puisque j'en parle, Openweb a un article détaillé sur la Cascade CSS et priorité des sélecteurs !