jquery hoverintent、chromeとfirefoxで動作し、Internet Explorerの1つの要素にカーソルを置いたときにホバーすると、すべてのホバー機能がトリガーされます。

Question

私はホバーオーバー時に水平に展開する垂直メニューを作成しました。それはクロムとfirefoxの夢のように動作しますが、Internet Explorerは何らかの理由でそれを好きではありません。いずれかの要素の上にマウスを置くと、すべてが飛び出します。

この関数は、アニメーションを使用してCSSを変更するjqueryプラグインのホバーインテントを使用します。ここで 私は日のために、この問題についての私の脳をラッキングされているとして任意のアイデアがextemely参考になるコードの一部...

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

私は今、それを解決しましたあなたの助けを借りて、リスト要素の相対的な位置を設定しなければなりませんでした。