"surlignage" en survol sur un texte

Question

Bonjour,    

Je souhaiterais savoir, comment faire pour surligné au survol un texte avec la couleur qu'on veut, comme sur le site "http://cuisine.journaldesfemmes.com" ?   

Configuration: Windows XP / Firefox 7.0.1

Utilisateur anonyme · Answer

Bonjour,

Il s'agit d'une propriété CSS.
Tu encadres le texte à colorer au survol dans une balise.

Par exemple :

<span class="test">Voici un texte à colorer au survol !</span>

Puis, dans le CSS :

.test:hover   
{   
font-color:red;   
}

Le :hover indique que l'action ne sera réalisée qu'au survol de tout ce qui a la classe "test".
J'espère t'avoir répondu, mes notions de CSS commencent à dater...
Mourir nuit gravement à votre santé.

radgeur · Answer

Bonjour, 
Pour cela il faut mettre un évènement dans ton code.

Mihawk · Answer

Salut,

Malheureusement il n'y a pas de propriété CSS permettant de "surligner" à proprement parler. Il faut insérer le texte à surligner dans un "span" auquel tu donnera une couleur de fond lors du survol, via l'utilisation de la pseudo-classe CSS "hover".

Voici un exemple de code à copier sur ton ordinateur, dans un fichier HTML basique. Il te montre l'utilisation du CSS combiné au HTML pour surligner un mot lors du survol de la souris.

<html>
  <head>
    <style>
      .surligneJaune:hover {background-color:yellow;}
    </style>
  </head>
  <body>
    <div>
      Voici un texte servant de test, et le mot suivant est surligné au survol : <span class="surligneJaune">dromadaire</span>.
    </div>
  </body>
</html>

Voici un texte servant de test, et le mot suivant est surligné au survol : dromadaire.

diddi776 · Answer

merci pour vos réponses,  

Pour être plus précis, je cherche à ce que chaque caractères de mon site soit surligné en une autre couleur, par exemple comme sur le site que j'ai donné (http://cuisine.journaldesfemmes.com) c'est "surligné" en rose.  

Alors je sais pas si je peut utiliser en css : text-decoration et mettre overline du type :  

.test{ 
text-decoration:overline; 
}


pour commencer

Poivreblanc · Answer

Un simple recherche google et le tour est joué :

*::selection {
	background:#cc2a00;
	color:#fff;
}

*::-moz-selection {
	background:#cc2a00;
	color:#fff;
}

*::-webkit-selection {
	background:#cc2a00;
	color:#fff;
}

"surlignage" en survol sur un texte

5 réponses

Discussions similaires

Newsletters