css - CSS :hover 在我将鼠标悬停在 AROUND 而不是 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>

这里的图像是一个 30 像素 x 30 像素的透明正方形。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 x 30px 正方形，其中有一个蓝色和红色的“关闭”十字。结果效果不是很好，因为:hover似乎只对我徘徊而不是在div. 请在此处查看演示。

我在这里做错了什么？

Answer 1

看起来另一个元素部分覆盖了关闭按钮。尝试添加一个z-index属性div#close，看看它是否有帮助。您可能还有另一个positioned具有更高z-index价值的元素。