Empty div hover event not firing in IE

user_158958 0
Viewed 18853

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; }
mousehover hover internet-explorer jquery
13 Answers

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)

user_1281650

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 !

user_6067320

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

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

user_2605280

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

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

This'll force IE to render the element

user_2597640

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.

Nick_Higgs_31870

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

user_2448110

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.

user_3315030
Related