csshoverimage-replacement

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. The HTML is

<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. The CSS is

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. The result doesn't work very well since :hover only seems to respond to me hovering around instead of over the div. Please see here for a demo.

What am I doing wrong here?

Solution

  • 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. You probably have another positioned element with a higher z-index value.