Discussion :

[calagan99]

Bonjour à tous.

J'utilise les pseudo-classes :hover et :first-letter pour certains titres des pages d'un site que je suis en train de construire et je viens de remarquer que le first-letter disparaissait aprés le hover.
Au chargement de la page mon first-letter fonctionne, le hover+first-letter fonctionne, mais quand je quitte le titre, le first-letter n'est plus pris en compte.

Je ne parviens pas à résoudre ce problème, avez vous des idées ?

Merci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    a:hover {
	text-decoration:none;
	color:#6CC7DC;
	}
 
       .entry-title {
	font-size:1.90em;
	font-weight:normal;
	letter-spacing:-1px;
	margin-bottom:5px;
	}
	.entry-title:first-letter{
		font-size:1.95em;
	}
	.entry-title:hover :first-letter{
		font-size:1.95em;
	}

[Bisûnûrs]

Sur ta ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.entry-title:hover :first-letter{

enlève tout simplement l'appel à la pseudo-classe first-letter.

[calagan99]

merci pour ta réponse mais si je fais ca, au hover le fisrt-letter n'est plus pris en compte et aprés le passage sur le texte je perds le first letter.

[Bisûnûrs]

Je viens pourtant d'essayer ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p>Ceci est du texte</p>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
p{
   font:normal 12px arial;
}
p:first-letter{
   color:green;
   font:bold 20px "times new roman";
}
p:hover{
   color:red;
}

Et le hover ne prend pas le dessus sur le first-letter.

Ou alors peut-être comptes-tu faire autre chose de plus ?

[calagan99]

Je te mets le html en plus du css.

Il s'agit simplement d'un titre de page auquel je souhaite appliquer un style.
J'utilise la balise <a> avec un href=#.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
		<div class="entry">
	            <div class="entry-title"><a href="#">Qui sommes-nous ?</a></div>
			<p>texte de présentation</p>
		</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
a:hover {
	text-decoration:none;
	color:#6CC7DC;
	}
.entry {
	padding:5px 10px ;
	text-align:justify;
	line-height:1.75em;
	width:450px;
	margin:20px;
	}
 
.entry-title {
	font-size:1.90em;
	font-weight:normal;
	letter-spacing:-1px;
	margin-bottom:5px;
	}
	.entry-title:first-letter{
		font-size:1.95em;
	}
	.entry-title:hover {
		font-size:1.95em;
	}

le resultat peut être vu ici, ce sera plus clair pour donner une idée du pb.

Merci pour ton aide

[Bisûnûrs]

Apparemment le problème vient du lien et de ses styles (par défaut du navigateur) qui priment sur les styles de son conteneur.

Comptes-tu réellement mettre un lien sur ce texte ou est-ce juste pour avoir le curseur en forme de main et/ou bénéficier de la pseudo-classe hover disponible pour IE6 que sur les liens ?

Si tu ne veux pas vraiment mettre de lien, je te conseille d'utiliser le hover du div conteneur, tant pis pour IE6.

Sinon, je crains que tu ne doives passer par du Javascript.

[calagan99]

je veux justement eviter de passer par du js.

Et quant à l'utilisation du <a>, c'est une mauvaise utilisation au départ, et pas eu le courage de changer...
Tu as raison, je vais modifier cela et passer par un hover sur la div conteneur.

[Bisûnûrs]

Dis-nous ce qu'il en retournera.

[calagan99]

Voila qui esr résolu.

Merci pour ton aide.

En respectant les standards et l'utlisation des balises et styles je n'aurais pas eu ce problème. Ca me servira de leçon pour la prochaine fois.

Merci encore