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 the page. Width: 100% and height 100px). I've used both firebug and ie developer toolbar to confirm that the parent div is on the page.

I can hover over the empty parent div in both Chrome and FireFox and everything works fine. IE requires that I have some sort of text inside to hover over. The div hover event will not fire with just an empty div.

All plausible work arounds for this issue?

--Update

Tried all of your suggestions but nothing has worked yet.

<div id="toolBar">          
  <div>
    <button id="btnPin" title="Click to pin toolbar" type="button">
      <img id="pin" src="../../images/icons/unpin.png" alt="Pin" /></button>
      <img src="../../images/icons/search.png" border="0" alt="Search" />
  </div>
</div>

The above html is contained within a master page div container. The child div is hidden with jQuery with some hover in/out events. The parent div (toolBar) is always visible on the page. When a hover occurs on toolBar the child div is shown.

Heres the jQuery code

$('#toolBar').hover(ToolBar_OnHover, ToolBar_OnBlur);

function ToolBar_OnHover() {

  $(this).children().fadeIn('fast');
  $(this).animate({ height: "100px" }, "fast");

}

function ToolBar_OnBlur() {

  $(this).children().fadeOut('fast');
  $(this).animate({ height: "50px" }, "fast");

}

Finally here's a little css

#toolBar { width: 100%; height: 100px; text-align:center; vertical-align:middle; position: absolute;  bottom: 0; background-color: Transparent;  }
#toolBar div { padding: 5px 5px 0px 5px; width:75%; height: 95px; background: transparent url('/images/toolbar-background.png') repeat-x; margin-right: auto; margin-left: auto; }

Answer 1

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)

Answer 2

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 3

I know that the question has been answered but I encountered the same problem. The empty div wouldn't fire the function. And if it had a border only the border itself would start the function. I tried lots of stuff, nothing helped. Here is my solution, it's pretty much the same only thing is that I didn't use an image. Add this to your CSS:

div {             /* write the element's name, class or id here */
background: #FFF; /* you can choose any colour you like, 1.0-fully visible */
opacity:0.0;      /* opacity setting for all browsers except IE */
filter: alpha(opacity = 0); /* opacity setting for IE, 0-transparent & 100-fully visible */
}

Answer 4

If you want to preserve your DIV this worked for me: background-color: rgba(0,0,0,0.001);

Answer 5

@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 6

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 7

Just insert an empty comment inside the "empty" element. :)

<div><!-- --></div>

This'll force IE to render the element

Answer 8

It might be that the hasLayout flag of the element needs to be forced. This can be done by applying the CSS property zoom:1 to it.

Answer 9

.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 10

You just can set opacity to make layer invisible and you should also set background

{
    background: white;
    opacity: 0;
}

Answer 11

I found the best way to float a mouse event tracking div over an area is to make the div 1px width and what ever height you need. Then give the div a transparent border-right of the actual width you need. The reason this works better than a transparent image is because if you use an image you then cannot track mousemove events, for example to drag, without the div losing focus (you instead will drag the image). I had this issue when both a jQuery UI slider or a mouse drag were used to scrub an animation. Here is a simple version of how my code looked.

//container div to hold the animation images this part doesn't really matter to answer the question
<div style="position:absolute; left:0px; top:0px; width:200px; height:200px">
// a bunch of images stacked like one of those animation flip books you made when you were a kid
   <img id="image01" src="blah01.jpg" />
   <img id="image02" src="blah01.jpg" />
   <img id="image03" src="blah01.jpg" />
   // and so on
</div>
//
// now the div that tracks the mouse events this is what I am describing to answer the question
// it could certainly be used above nav items and would have less load time than an image
<div style="position:absolute; left:-1px; top:0px; width:1px; height:200px; border-right: solid 200px transparent; />

In my application for every 2 px the mouse moved left or right I would give the appropriate image visibility while hiding all others and bingo you have an animation. (The empty div worked fine in all non IE browsers, but this worked in IE as well as non IE so no need to write it two ways.)

Answer 12

I was able to make use of the "Braille Pattern Blank" which is an invisible, non-whitespace character that is still "there", takes up a space, and allows events like mouseover to still fire. The snippet below shows this (the div isn't zero width as it would be if it were empty or contained only whitespace):

.notActuallyEmpty {
  background-color: gray;
  width:50px;
}

⠀⠀
<div class="notActuallyEmpty">⠀</div> <!--Unicode Character “⠀” (U+2800)--!>

Answer 13

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.