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標籤的跨度

回答

相關問題