css: hover sur la travée dans li tag

Quel est le problème avec mon code? pourquoi quand je passe la souris sur la balise, ne changez pas l'arrière-plan de la balise.css: hover sur la travée dans li tag

<style type="text/css"> 
#menu ul{ 
    list-style-type: none; 
    margin-left: 0px; 
    padding-left: 0px; 
    height: 33px; 
} 
#menu li{ 
    display: inline; 
    margin-left: 5px; 
    height: 33px; 
} 
#menu a{ 
    color: #336699; 
    height: 33px; 
} 
#menu a:hover{ 
    color: #FFFFFF; 
    height: 33px; 
    background:url(images/mid.gif); 
} 
#menu li .right{ 
    width: 20px; 
} 
#menu li .right:hover{ 
    width: 20px; 
    background:url(images/right.png) no-repeat; 
    background-position: left top; 
} 
</style> 
<body> 
<div id="menu"> 
    <ul> 
     <li><a href = "">One<span class="right"></span></a></li> 
     <li><a href = "">Two<span class="right"></span></a></li> 
     <li><a href = "">Three<span class="right"></span></a></li> 
     <li><a href = "">Four<span class="right"></span></a></li> 
    </ul> 
</div>

Source

2010-11-12 lolalola

probablement parce qu'une portée de superposition? – Hannes

un exemple vivant à jsbin.com aiderait plus – Sotiris

si vous demandez sur les portées, ils sont des éléments en ligne de sorte que vous ne pouvez pas donner une largeur ..

vous devez utiliser des éléments de bloc (comme l'étiquette div), ou modifiez les travées pour devenir un bloc avec display:block ou display:inline-block.

Pour plus de lecture jeter un oeil à W3C Visual Formatting Model, et aussi jeter un oeil à http://www.quirksmode.org/css/display.html#t03

Vous devez également ajouter un   dans les travées afin qu'ils obtiennent une hauteur aussi bien ..

ici est un exemple en direct http://jsfiddle.net/YuJPg/

Source

2010-11-12 15:01:53

quelle est la différence entre le bloc et le bloc en ligne? –

Merci de votre aide, mais cela ne fonctionne pas pour moi. – lolalola

@Collin, ajouté quelques références qui expliquent les différences. –

changement .RIGHT de classe pour inclure display: block;

Source

2010-11-12 15:00:36

css: hover sur la travée dans li tag

Répondre

Questions connexes