css：悬停在li标签的跨度

我的代码有什么问题？为什么当我悬停在标签上时，不要在标签中改变背景。css：悬停在li标签的跨度

<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>

来源

2010-11-12 lolalola

可能是因为覆盖跨度？ – Hannes 2010-11-12 15:02:27

jsbin.com上的一个实例可以帮助更多 – Sotiris 2010-11-12 15:56:40

如果你问的跨度，他们是内联元素，所以你不能给一个宽度..

你需要使用块元素（ 类似于div标签），或者使用display:block或display:inline-block更改跨度成为块。

您还应该添加一个 跨度内，使他们获得了高度以及..

这里是一个生动的例子http://jsfiddle.net/YuJPg/

来源

2010-11-12 15:01:53

块和内嵌块之间有什么区别？ – 2010-11-12 15:07:25

感谢您的帮助，但是这对我没有任何作用。 – lolalola 2010-11-12 15:14:58

@Collin，增加了一些解释差异的参考。 – 2010-11-12 16:02:23

更改类.right包括display: block;

来源

2010-11-12 15:00:36

css：悬停在li标签的跨度

回答

相关问题