[英]CSS :hover responds when I hover AROUND rather than OVER div element
I'm having a subtle but annoying problem: I'm trying to implement a "Close" cross with a CSS image replacement. 我有一个微妙但令人烦恼的问题:我正在尝试用CSS图像替换来实现“关闭”交叉。 The HTML is HTML是
<div id='close' title='Close'>
<a href='#'>
<img src='https://dl.dropbox.com/u/116120595/images/tr_sq_30_30.png' />
</a>
</div>
The image here is a 30px by 30px transparent square. 这里的图像是30px×30px的透明正方形。 The CSS is 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;
}
The two images are transparent 30px by 30px squares, with a blue and red "Close" cross in them. 这两幅图像是透明的30px×30px正方形,其中有一个蓝色和红色的“近”十字。 The result doesn't work very well since :hover
only seems to respond to me hovering around instead of over the div
. 结果并不能很好地工作,因为:hover
似乎只在我左右徘徊,而不是在响应div
。 Please see here for a demo. 请看这里的演示。
What am I doing wrong here? 我在这做错了什么?
It looks like another element is partly overlaying the close button. 它看起来像另一个元素部分覆盖了关闭按钮。 Try adding a z-index
property to div#close
and see if it helps. 尝试将一个z-index
属性添加到div#close
并查看它是否有帮助。 You probably have another positioned
element with a higher z-index
value. 您可能有另一个具有更高z-index
值的positioned
元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.