jquery - jquery hoverintent，适用于chrome和firefox，当我将鼠标悬停在Internet Explorer中的一个元素上时，所有悬停功能都会被触发

Question

我创建了一个垂直菜单，当鼠标悬停在上面时会水平展开。它在 chrome 和 firefox 中运行起来就像一个梦想，但 Internet Explorer 出于某种原因不喜欢它。当悬停在任何元素上时，它们都会弹出。

该函数使用 jquery 插件悬停意图，它使用 animate 更改 css。这是一些代码...

// one of these functions for each menu item, the inactive3 is obviously changed to the different list element

  $('li.inactive3').hoverIntent(expandit3, resetit3);

  function expandit3(){
$('li.inactive3').stop().animate({ width: "609px",height: "306px"}, "fast" );
  }

  function resetit3(){
$('li.inactive3').stop().animate({ width: "150px",height: "153px"}, "slow" );
  }


// the list elements are contained in the menudiv

#menudiv {
 z-index: 3;
 float: left;
 visibility: visible;
 position: fixed;
 display:block;

overflow:hidden;
}

// here is the list item css

  .inactive3 {
 z-index: 3;
 list-style-type: none;
 width: 150px;
 height: 153px;
 overflow: hidden;
 margin: 0px;
 padding: 0px;
 visibility: visible;
clip:auto;
display:block;
}

任何想法都会非常有帮助，因为我已经为这个问题绞尽脑汁好几天了，这似乎是 iexplorer 的某种问题。

干杯

Answer 1

这应该是所有浏览器中的行为，要具有每个元素的行为，您应该将this其用于当前元素，如下所示：

$('li.inactive3').hoverIntent(expandit3, resetit3);
function expandit3(){
  $(this).stop().animate({ width: "609px",height: "306px"}, "fast" );
}
function resetit3(){
  $(this).stop().animate({ width: "150px",height: "153px"}, "slow" );
}

Answer 2

我现在解决了，只需将列表元素的位置设置为相对，感谢您的帮助。