28172 sujets

CSS et mise en forme, CSS3

Li hover

Bonjour,

J'aimerais réaliser l'effet hover sur les li en changeant le fond plus la couleur de la fonte.

Mais avec le code suivant seulement le code du fond change :

.sidemenu ul li a:link, .sidemenu ul li a:visited {
    color: #33799B;
    font-weight: bold;
    padding-left: 0;
    text-transform: uppercase;
}

.sidemenu ul li:hover, .sidemenu ul li:active {
    color:#CC0000;
	background:none repeat scroll 0 0 #fffeee;
	display:block;
    
}


Ou est l'erreur ?

Merci.
Bonjour lddsoft,

J'ai ajouter ceci :

.sidemenu ul li a:hover, .sidemenu ul li a:active {
    color: #CC0000;
}


Pour changer la couleur des liens au survol de la souris sur l'élément li et sont contenu, mais voila la couleur ne se change que si la souris est sur le lien seulement.
si l'élement <a> rempli tout le <li> ça ne pose aucun problème ... et le :hover correspond au survol de la souris ... ajoute le :focus pour le clavier Smiley cligne
bonsoir,

ou bien:
.sidemenu ul li a:hover, .sidemenu ul li a:active, 
.sidemenu ul li:hover a
  { 
    color: #CC0000; 
}


Les selecteurs !

Cordialement
Arialia a écrit :
si l'élement <a> rempli tout le <li> ça ne pose aucun problème ... et le :hover correspond au survol de la souris ... ajoute le :focus pour le clavier Smiley cligne


Bonjour Ariala,

Non la hauteur du <li> est plus grande que <a> :

.sidemenu ul li {
    border-bottom: 1px solid #EFEFEF;
    font-size: 11px;
    list-style: none outside none;
    margin: 0;
    padding: 7px 5px; /*ICI*/
}


Merci. Smiley biggrin
J'ai ajouté 
display:block
au <a> est ça marche Smiley ravi 

.sidemenu ul li {
    border-bottom: 1px solid #EFEFEF;
    font-size: 11px;
    list-style: none outside none;
    margin: 0;
    padding: 7px 5px;
}
.sidemenu ul li a:link, .sidemenu ul li a:visited {
    color: #33799B;
    font-weight: bold;
    padding-left: 0;
    text-transform: uppercase;
	display:block; /** [b]ICI[/b] **/
}
.sidemenu ul li a:hover, .sidemenu ul li a:active, .sidemenu ul li a:focus {
    color: #CC0000;
	
}

.sidemenu ul li:hover, .sidemenu ul li:active,  .sidemenu ul li:focus{
    
	background:none repeat scroll 0 0 #f8f8f8;
}


Mais à ma connaissance le : 
display:block
ne sert que dans les menus HORIZONTALEs pour aligner les éléments de la liste horizontalement !!?

Apparemment ça marche aussi pour les menus verticales ????

Smiley eek
Sujet clos
Aller à