Question

Related to this question, I have set up some jquery to pop-up a new div over an existing div. Whilst this works brilliantly in every other browser, the IE family refuse to behave nicely. With the following filters removed it works quickly (incorrectly, but quickly), whereas with the filters it takes a long time for the new div to appear / disappear. If left for long enough IE (6-8) will run through the jquery in order (i.e. it appears to be caching the creation/destruction of the new divs then replays them).

What do I need to do to get IE to act correctly and quickly?

The filters I am trying to use:

.newDiv
{
  opacity: 0; /*Every other browser*/
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*IE8*/
  filter: alpha(opacity=0); /*IE5-7*/
}

.newDiv:hover
{
  opacity: 1; /*Every other browser*/
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*IE8*/
  filter: alpha(opacity=100); /*IE5-7*/
}

Answer 1

In the end I used

.newDiv
{
 visibility:hidden;
}
.newDiv:hover
{
 visibility:visible;
}

This worked across all browsers except IE<=6 (cannot use :hover on anything but an anchor).