2010-12-03 13 views
3

divにリンクがあります。ユーザーがリンク上にマウスポインタを置くと、親divの背景画像を変更するbasic_nav_mouseover()関数を呼び出します。私はまた、マウスポインタがのdivを離れたときに、親のdiv になし背景画像を設定する必要があり、親の ommouseout属性に関数basic_nav_mouseoutを追加しました。しかし、不思議なことに、関数parent_nav_mouseout()は、マウスポインタが親div内のリンクを離れるとすぐに呼び出されます。テストページはhttp://spats.in/test/です。右上の 'about'、 'people'、 'connect'のリンクを見てください。「onmouseover」がJavascriptで予期せず動作する

どこが間違っていますか?

+0

基本的には、ユーザーが「約」をポイントしたときに、表示されているdivの背景色が変更される必要があります。しかし、ユーザーがdivからマウスを離したとき、包含divの背景色は標準(赤から透明)に戻ります。 – aakashbhowmick

答えて

4

limitations of the mouseover and mouseout eventsについては、jQueryのドキュメント(実際のページの半分ほど)の説明があります。期待どおり、バウンド要素の上にマウスを移動すると

Mouseovermouseoutのイベントがトリガさが、彼らは火親要素内の任意の内部要素の上にあなたはマウスが別のイベントも- これはほとんどの状況では、明らかに望ましくありません。

問題を解決するには、基本的にmouseentermouseleaveイベントを使用してください。

ユーザーエクスペリエンスの観点からは、両方のイベントをリンクにバインドすることをお勧めします。そのため、特殊な背景色は実際にリンクがアクティブであることを示しています。ハイライトされた背景は私がまだリンクをクリックすることができると思うようになるので、かなり誤解を招きます。

あなたが現在持っている視覚効果を保ちたいならば、各リンクの背後にある)、リンクがボックス全体を占めるようにします。つまり、divの高さと幅の100%です。

1

onmouseoverがリンクに設定されている場合、onmouseoutは同じ要素に設定する必要があります。

0

私はJavaScriptのエキスパートではありませんが、ページが完全に読み込まれるまで、関数をイベントにバインドするのを待つべきではありませんか?だから、:また

window.onload = function(){ 
    $('.item1').bind('mouseleave',basic_nav_mouseout); 
}; 

私はあなたが「basic_nav_mouseoutでオブジェクトを引数として与えなければならないと思います(私が間違っているなら、私を修正)、することができます(」、 『赤いITEM1' 。』)」 'this'キーワードを使用してください。だから:

function basic_nav_mouseout(){ 
    this.css('background-image',"none"); 
} 

私はJQueryライブラリについては何も知らないが、私の唯一の(少しの)経験はPrototypeライブラリにある。

関連する問題