I'm encountering a subtle yet bothersome issue: I'm attempting to incorporate a "Close" button using CSS image replacement. The HTML code is as follows:
<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 used here is a transparent 30px by 30px square. The corresponding CSS is as shown below:
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;
}
Both images are transparent squares measuring 30px by 30px, containing blue and red "Close" crosses. The outcome is not satisfactory since the :hover effect appears to trigger when hovering around rather than directly over the div. You can view a demonstration here.
What could be the error in my approach?