ie7下的hover和ie8，9的不兼容，怎么办？

用hover功能做了个菜单的样式：

在li里的hover事件中，当鼠标移入时在它下面添加一个div，移出时删除这个div。

在ie8和ie9下都没问题。但是在ie7下，如果移动的速度过快，或者移到div里的空白处，都会触发hover的移出时间，也就是将div删除了。请问怎么解决这个问题？

10 个解决方案

#1

li加背景色

#2

试试给div加overflow:hidden,也许是div高度不够的问题

#3

hover切换事件，需要在每一个里面加入一定事件的延迟。例如，你把鼠标移动到div上面，然后过很短的时间(例如100毫秒)之后在删除div。在离开的时候同样的思维，这样子估计就不会出现你的问题了吧。如果还没有解决，那就是你的div的大小不确定，导致看不到div的范围从而不知道鼠标是不是移动到div上面了，可以给div加入北京颜色或者边框，来定位一下div，这个样子调试会更直观。更容易找出问题的所在。

#4

现在我给div加背景色就不会消失了，但是我们需要透明效果，怎么即透明又能不让菜单消失呢？

透明背景是加载了一个透明的图片：


.DropMenu_w5{background:url(../images/navigationMenu/transparent_background1.png) repeat;}

#5

现在的问题是鼠标在白色背景的div上滑动，就不触发鼠标离开div的事件。

但是如果鼠标在div的透明背景图上滑动，就会触发鼠标离开div的事件。

不明白为什么会这样，透明背景也是在div上啊，不应该被视为离开div啊？

请问怎么解决，即有透明背景，鼠标在上面滑动，div也不会消失？

#6

background-color:white;

#7

#8

还是不行啊！

还有其他办法吗，鼠标在透明背景下滑动不触发离开事件？

#9

<!--IE9向下兼容IE8-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<!--IE8向下兼容IE7-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">

#10

楼上的方法我也试了，也不行。

我想我这个是ie7要向上兼容ie8和ie9吧？

#1