Probleme :hover

pee3x Messages postés 72 Date d'inscription   Statut Membre Dernière intervention   -  
 Profil bloqué -
Bonjour,

Je souhaite faire un menu avec des liens qui changent de fond quand on passe la souris dessus. J'ai donc fait le code html suivant: 
<div id="middle-menu"><a href="">un</a><a href="">deux</a><a href="">trois</a><a href="">quatre</a></div>


et ce code css: 
#middle-menu a
{
	color: rgb(71,71,71);
	padding: 4px 12px;
	border-radius: 10px;
	margin: 0 30px;
        border: 1px solid black;
}
#middle-menu a:visited
{
	color: rgb(71,71,71);
	padding: 4px 12px;
	border-radius: 10px;
	margin: 0 30px;
}
#middle-menu a:hover
{
	background-color: rgb(102, 102, 102);
	color: #fff;
}
#middle-menu
{
	line-height: 50px;
	border: 1px solid black;
}


Mon problème, c'est que le lien ne change pas de fond quand la souris passe a l'interieur de la bordure du <a></a> ni meme quand elle est sur le texte, mais quand elle passe au dessus d'une zone juste en dessous du texte... et j'aimerais que le hover s'active quand la souris rentre dans la bordure. C'est vraiment bizarre et je n'ai trouvé aucune solution.

Pouvez-vous m'aider svp?

Merci

1 réponse

Réponse 1 / 1
Profil bloqué
 
salut
essaie d'ajouter un display block ici :

#middle-menu a
{
display:block;
color: rgb(71,71,71);
padding: 4px 12px;
border-radius: 10px;
margin: 0 30px;
border: 1px solid black;
}
1