CSS：當我懸停AROUND而不是OVER div元素時，懸停響應

Question

我有一個微妙但令人煩惱的問題：我正在嘗試用CSS圖像替換來實現“關閉”交叉。 HTML是

<div id='close' title='Close'>
    <a href='#'>
        <img src='https://dl.dropbox.com/u/116120595/images/tr_sq_30_30.png' />
    </a>
</div>

這里的圖像是30px×30px的透明正方形。 CSS是

div.fadeOut div#close{
    margin:5px;
    width:30px;
    height:30px;
    background:url(https://dl.dropbox.com/u/116120595/images/blue_ccr_30_30.png) 0px 0px no-repeat;
    position:absolute;
    right:0px;
    top:0px;
}

div.fadeOut div#close:hover{
    background:url(https://dl.dropbox.com/u/116120595/images/red_ccr_30_30.png) 0px 0px no-repeat;
}

這兩幅圖像是透明的30px×30px正方形，其中有一個藍色和紅色的“近”十字。 結果並不能很好地工作，因為:hover似乎只在我左右徘徊，而不是在響應div 。 請看這里的演示。

我在這做錯了什么？

Answer 1

它看起來像另一個元素部分覆蓋了關閉按鈕。 嘗試將一個z-index屬性添加到div#close並查看它是否有幫助。 您可能有另一個具有更高z-index值的positioned元素。