Hover not working properly in IE7

Question

Hello,

I'm trying to replicate a Facebook wall-like effect where hovering over a feed item displays a "Delete" button. The button is invisible on page load, but hovering over the item displays that particular item's delete button. This is achieved with jQuery and the CSS display property.

This works all well and good in browsers such as Safari, Chrome and Firefox, but come to Internet Explorer 7 and it's a no-go.

Here's an example:

http://www.woohoobingo.com/wall.html

The above link is a rendered page within the site featuring the wall, with the hover feature working in Safari et al but not Internet Explorer 7 (untested in other versions due to lack of resources).

If any one could shed some light on how to rectify this problem so IE adds the hover class when hovering over the list item and not the text within the list item only, then that would be great.

Answer 1

Hi @Martin it is working but somehow the delete button is not being considered a part of the div or container which is show it on hover. I've written the stuff below and it is working well. You may get any clues from this.

<div id="divA" style="border:1px dotted white;width:500px;clear:both;">
<div id="divLogo" style="height:20px;width:20px;overflow:hidden;float:left;">
    <img src="arrow.png" alt="logo" style="height:20px;width:20px;"/>
</div>
<div>Hello World this is the message written on the wall.....</div>
<div id="divDelBtn" style="width:50px;height:25px;top:1px;float:right;">
<span style="background-color:#c0c0c0;color:#ffeeee;display:none;">Delete</span>
</div>
<div id="otherStuff" style="font-size:70%;color:#0f0f33;">
    posted by @me on 18/jan/2010 12:34 PM</div>
</div>

<script type="text/javascript">
$(function(){
$("#divA").hover(function(){
    $("#divA").css("border-color","red");
    $("#divA #divDelBtn span").show();
},
function(){
    $("#divA").css("border-color","white");
    $("#divA #divDelBtn span").hide();
});
});
</script>