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

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

jquery hoverintent，在chrome和firefox中工作，当我将鼠标悬停在Internet Explorer中的一个元素上时，所有悬停函数都会被触发

2 个答案: