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; }

Futures

You indicate you set a height and width of the parent div, did you do the same for the child div? – Electromyography

I just tried it with IE7. Works for me. – Espinal

God damned, I have IE9 and it still has this bug (in edge mode). I add a solid color and the element is clickable and hoverable, otherwise not. Can someone please burn IE team in hell? Thanks nothing else. – Antitoxic

In IE 9 it's really bug. IE 8 and 7 are better in this case. – Grover

It happens in IE10 as well. Kill it, kill it with fire. – Samos

Yep, I came looking for this. What a ridiculous joke. – Austral

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)

Eighth

Thank you for the post. All it took was a 100% transparent background image and voila! – Futures

@Matt, brilliant idea.. completely unobtrusive and does the job +1 – Eighth

This didn't work for me - when I added the border the hover event only fired when the mouse was over or very close to the border. For my purposes I wouldn't have been able to use the border anyhow, because I needed an invisible div that could receive hover events while on "top" of overlayed images with transparency... the transparent background did the trick for me (comments and nbsp didn't work either...) – Overstate

I hate this kind of tricks, but seems like an only solution,thanks. – Grover

Not even setting a background image worked for me, in fact I used the empty div for a background image but IE7 still wouldn't fire events. What eventually worked was an ugly as heck hack, using conditional HTML to insert text into the div only for IE7, then setting that text-color to transparent in a (conditional) stylesheet. width and height specifications determine the div's dimensions like in other browsers, so it is (sort of) unobtrusive. Anyway It is time for IE7 to retire from the game for good – Hale

Omg I was pulling my hair out on this one. Affects ALL versions of Compat mode in IE10 – Samos

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 !

Furcula

IE is always special even IE10 is unhappy about this issue,anyway thanks for help ! Here is a link to transparent gif 1x1: golivetutor.com/tutorials/misc/transparent.html – Masterstroke

A working link to a 1x1 transparent gif: en.wikipedia.org/wiki/File:Clear.gif – Eleanoraeleanore

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 */
}

Panathenaea

this dont want if you want to fire a img that is child from div. – Shumate

Answer 4

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

Furuncle

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);

Unmusical

This hides my child elements in IE8, too, even if I apply a new filter:alpha value to the child elements. – Dimension

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.

Jacklight

Answer 7

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

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

This'll force IE to render the element

Hexarchy

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.

Dewie

Answer 9

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

Wobble

Answer 10

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

Myriad

Answer 11

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

{
    background: white;
    opacity: 0;
}

Razo

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)--!>

Abdominous

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.

Navarro