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.