Fatal编程技术网
  • css/
  • CSS:hover在我将鼠标悬停在div元素上时响应

CSS:hover在我将鼠标悬停在div元素上时响应

css

CSS:hover在我将鼠标悬停在div元素上时响应,css,hover,image-replacement,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图像替换实现一个“闭合”十字。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正方形，中间有一个蓝色和红色的“闭合”十字。结果不太好，因为
：hover
似乎只对我在周围而不是在
div
上悬停做出响应。请看演示

我做错了什么？

看起来另一个元素部分覆盖了关闭按钮。尝试将
z-index
属性添加到
div#close
中，看看是否有帮助。您可能有另一个
定位的
元素具有更高的
z-index
值。
看起来另一个元素部分覆盖了关闭按钮。尝试添加一个
z-index
属性，看看是否有帮助。还有，一个JSFIDLE会更有帮助：）@Boaz:你是说30px乘30px
div
元素的
z-index
，对吧？a
z-index
到
div\close
元素，是的。哥们，就是这样！！完美的非常感谢！！太好了：）把它贴出来作为答案。

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;
}