jquery hoverintent, работает в Chrome и Firefox, при наведении курсора на один элемент в Internet Explorer, все функции наведения запускаются

Question

Я создал вертикальное меню, которое расширяется по горизонтали при наведении. Это работает как мечта в Chrome и Firefox, однако Internet Explorer почему-то не нравится. При наведении курсора на любой элемент все они выскочили.

Функция использует намерение наведения плагина jquery, которое изменяет CSS, используя animate. Вот часть кода ...

// 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

Я решил это сейчас, просто нужно было установить положение элементов списка относительно, спасибо за помощь

Answer 2

Это должно быть поведение в всех браузерах, чтобы иметь поведение для каждого элемента, вы должны использовать 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" );
}