CSS：悬停响应当我悬停而不是OVER div元素

我有一个微妙，但烦人的问题：我试图实现一个“关闭”交叉与CSS图像替换。的HTML是CSS：悬停响应当我悬停而不是OVER div元素

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

这里的图像是由30像素透明正方形一个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由30米像素的正方形，在他们的蓝色和红色的“关闭”交叉。因为:hover似乎只响应我徘徊约而不是超过的div效果不好。演示请参阅here。

我在这里做错了什么？

来源

2013-03-20 RubenGeert

它看起来像另一个元素部分覆盖关闭按钮。尝试添加一个'z-index'属性，看看它是否有帮助。另外，一个jsFiddle会更有帮助:) – Boaz 2013-03-20 05:54:26

@Boaz：你的意思是一个30px×30px'div'元素的'z-index'，对吧？ – RubenGeert 2013-03-20 05:56:15

对'div＃close'元素有'z-index'，是的。 – Boaz 2013-03-20 05:57:06

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

来源

2013-03-20 05:57:56 Boaz

CSS：悬停响应当我悬停而不是OVER div元素

回答

相关问题