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

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

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

This'll force IE to render the element

Answer 2

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

Answer 3

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 4

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 5

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

{
    background: white;
    opacity: 0;
}

Answer 6

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