Bonjour, je suis en plein apprentissage des nouvelles propriétés CSS 3.0, je recherche un moyen de faire garder la couleur du texte au hover quand je clique dessus, comment faire cela en CSS 3 ? merci !!

Salut !

a:hover, a:focus {
bla-bla: bla;
}

M'enfin c'est pas du CSS3 ça... je crois que je n'ai pas compris ton problème.

en gros quand je passe la souris sur mon lien le texte deviens bleu, quand je clique une fois sur la page la bouton reviens à sa couleur d'origine mais je voudrais qu'il reste bleu pour que le visiteur de mon site comprenne qu'il est sur la page contact par exemple !

a:visited alors !

Non car si il clique sur tout les liens alors il seront tous bleu c'est pas le but après quand il clique portfolio c'est portfolio qui reste bleu et contact reprend la couleur d'origine !

Oh ok j'ai compris ça y est !

Tiens regarde je viens de commencer un site aujourd'hui où j'au fait un truc comme ça, inspire toi du code source.

http://www.belo7.freasylang.com/index.html

Oui mais la tu utilise du javascipt moi je souhaite savoir si c'est faisable uniquement en css3 et si oui comment le faire car je vois que tu ajoute la class current au lien cliqué

Non non non c'est du tout CSS.

Tu donnes une classe au lien courant et tu le changes dans le CSS (couleur, image de fond, taille, etc).

tu peux me mettre le code css et le html pour un petit exemple stp car je suis perdu lol

OK :

a, a:visited, a:focus, a:hover {
color: #9cbd17;
text-decoration: none;}

nav li a {
margin-bottom: 10px;
width: 200px;
padding: 5px;
display: block;}

nav li a:hover {
background-color: #9cbd17;
color: black;
border-radius: 5px 5px 5px 5px;}

nav li a.current {
color: black;
font-weight: bold;
border: 1px solid #9cbd17;
border-radius: 5px 5px 5px 5px;
background-color: #777;}

<header>
	<p>
		<img src="http://upload.wikimedia.org/wikipedia/fr/thumb/f/ff/Logo_Br%C3%A9al.svg/400px-Logo_Br%C3%A9al.svg.png" alt="Belo7 logo" />
	</p>
	<nav>
		<ul>
			<li><a href="../index.html">Home</a></li>
			<li><a href="#" class="current">About</a></li>
			<li><a href="services.html">Range of services</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
</header>

eu comment cela fonctionne tous es la pour que cela fonctionne ? explique moi étape par étape stp


La class current comment elle aparait dans les balise a ?

Les balises nav sont obligatoires ?

Le lien "about" avec son "#" recharge la page si on clique dessus mais il est en gras, avec une bordure et une couleur de fond différent.

Tous les autres liens n'ont de fond que si on les survole, ainsi on sait où toujours on est

Sur les autres pages je change l'endroit où se trouve le lien "current" et j'ajoute le lien "about".

Je l'ai fait manuellement parce que 'il n'y a que 4 pages mais tu peux facilement le faire en PHP de manière automatique.

Tu veux savoir comment faire ça en PHP et non manuellement ?

HAAAAAAA le problème c'est que je suis sur une seule et unique page lol

Qu'est ce que tu veux faire exactement ?
Il te faut du PHP ou du JS pour avoir une page dynamique, sinon tu utilises plusieurs pages

la meme chose que toi mais moi j'ai q'une page sur laquel je slide en css3 avec les transitions pour afficher la partie que je souhaite donc ton systeme ne fonctionne pas pour moi

Ah attends j'ai peut-être une solution en CSS...
Tu peux faire apparaitre un message au survol de la souris qui disparait ensuite quand tu enlèves la souris, ça pourrait t'aider ?

Comme sur cette page tout en CSS/HTML par exemple : http://sdz.atspace.com/code/uxmal1a.html (faite pour mon tuto)

En fait ton systeme sur les lien avec la classe courant est pas mal comment la tu fais sans JS ?

Tu parles du premier site que je t'ai donné ? Je t'en ai donné le code

Beaucoup de gens courent après le Javascript alors que souvent le CSS résoudrait leur problème. J'aime bien le CSS. Comme tu vois on peut même faire un diaporama !

Pour apprendre un peu tu peux suivre mon tuto (lien dans ma signature), j'y explique chaque étape en détail.

OKI merci de ton aide à bientot !