CSS:当我悬停AROUND而不是OVER div元素时,悬停响应

时间:2013-03-20 05:47:30

标签: css hover image-replacement

我有一个微妙但烦人的问题:我正在尝试使用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。有关演示,请参阅here

我在这里做错了什么?

1 个答案:

答案 0 :(得分:2)

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