Empty div hover event not firing in IE

Question

I have a div with a child div inside it. I\'m using jQuery to show / hide the child div whenever a mouse hovers over the parent div (parent div spans the entire bottom of th

Answer 1

It's kind of hacky, and I don't know if it'll change the layout, but you could always just put an   inside the div.

Answer 2

If you don't have to support IE6. In your graphics program (Photoshop) create a 1x1 image of a white box. Reduce the opacity to 1%. Save as a PNG24 or GIF. Then, make this the background image for the transparent DIV.

This takes care of the issue and preserves the opacity of any child elements.

Answer 3

@Skateball: that solution works, but also hides any child elements in FF/chrome. Here is my take:

background:#000;
background:rgba(0,0,0,0);
filter:alpha(opacity=0);

Answer 4

None of comments and filters stuff works for me. The div is never rendered, so no hover possible.

Ultimate solution:

.aDiv {
    background: transparent url(../images/transparent.gif) repeat;
}

With a one pixel transparent gif image. Sure it works !

Answer 5

.trasnparentIE
{
    background: url(../images/largeTransparent.gif) repeat;
}

when I added the border the hover event only fired when the mouse was over or very close to the border but i dont need the border so i just use of transparent background and it works for me ... the transparent background did the trick for me (comments and nbsp didn't work either...)

Answer 6

it will work if you set a background-color or a border ...

if you could match either of these with the existing look then you would be ok..

(a background-image seems like the most unobtrusive solution)