Décaler la couleur de fond en hover sans bouger le texte...

Bonjour à tous, je créer en ce moment un site sur dreamweaver et
je cherche désespérément comment parvenir à réaliser ce type de Hover : http://editionsmego.com. C'est probablement très simple mais quelque chose m'échappe
Comment rendre le texte et le background indépendant ?

Par avance merci,
et passez une bonne journée

Bonjour,

.taclasse:hover {
background-color : la couleur que tu veux;
}


http://www.alsacreations.com/astuce/lire/43-comment-dfinir-lapparence-de-ses-liens.html
comme ça a chaud!!
Modifié par Chriss2014 (10 Oct 2014 - 16:14)

Salut,

Si c'est pour le décalage c'est tout simple. Si tu regarde ton exemple en lien il y a un <a> dans un <li>.

<li><a href="">Menu</a></li>

Jusque là normal. Ce que ton exemple fait c'est de décaler le <a> vers le haut grâce à un

margin-top: -5px;

pour qu'il sorte un peu du li (mais sans bouger sa taille -> cf position relative). Et de la, au hover c'est le background du <li> qui devient jaune. Et voila
Modifié par _laurent (10 Oct 2014 - 16:19)

Merci de vos réponses, mais je n'y arrive toujours pas ...

Voila mon code :

<ul id="nav">
		<li class="current"><a href="#intro">actualités</a></li>
		<li><a href="#aujourdhui">aujourd'hui</a></li>
                <li><a href="#cettesemaine">Cette semaine</a></li>
                <li><a href="#emissions">émissions</a></li>
		<li><a href="#manifeste">manifeste</a></li>
                <li><a href="#infos">infos</a></li>
	</ul>

#nav {
	font-family:'Breite Grotesk Regular';
     margin-left:22px;
     list-style: none;
     position: fixed;
	top: 198px;
}

#nav li {
	margin-bottom: -1px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #F3F3F3;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #F3F3F3;
}

#nav a {
	color: #F3F3F3;
	display: block;
	font-size: 15px;
	padding: 5px 10px;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
}

[b]li:hover {
	margin-top:-5px;
	background-color:#00F;
}[/b]

Désolée j'ai fais plusieurs test, mais je ne dois pas avoir compris...
Modifié par 6l20 (11 Oct 2014 - 12:27)

essaye

li:hover {
background-color:#00F;
}

#nav a {
margin-top: -10px;
    margin-left: -25px;
}

et tu peut mettre un ' height ' pour #nav li
(tester pour les grandeurs)
Modifié par 6l20 (11 Oct 2014 - 12:27)

pour faire rapidos l'effet , il suffit pour toi d'utiliser un background-image à la place de background-color ainsi t'auras un effet décaler en jouant sur la couleur de l'image