2016-07-10 4 views
-2

要素の上にマウスを置いて開くポップアップを設定しました。ポップアップは、カーソルがオフのときに閉じる必要があります。 何らかの理由で、カーソルがオープナーボタンの右にあるときにポップアップウィンドウが閉じます。 あなたがここでの例を見ることができます: http://www.friends.wwz.co.il/Lab/Gefen/Generali/es/popup.htmlmouseoutは、ターゲットではなくトリガーを閉じます。

「リーMAS」ボタンをマウスでホバリングしてみてください。ポップアップが開きます。それはそれを離れてホバリングで閉じる必要があります。しかし、代わりにリーママスボタンをホバリングして閉じるので、すぐに閉じます。 どこが間違っていますか? 事前にアドバイスをいただきありがとうございます

答えて

0

主な問題は、ホバーイベントをボタンに付けることです。ボタン要素の外に移動すると、hoverOutボタンが押されます。

だから、アクションの理想的なコースがあることができます:ボタンへ

  • バインドホバーイベント。
  • 一度表示されると、ポップアップが動的に追加されます。
  • 次に、ホバーイベントがポップにバインドされます。
  • そして、ホバーアウト機能では、ポップアップを解消するコードが添付されています。

実際にカーソルがポップアップから飛び出したときに、それが解消するようにします。

それ以外は、このfiddleをご覧ください。それには2つのハイパーリンクがあります。最初はあなたが直面しているものです。もう一つは、あなたが探しているものです。 :それのためのD

コード:

$(document).ready(function() { 
 
    $("#toggleSwitch_j").hover(
 

 
    function() { 
 
     $("#theBox_3").slideDown(500); 
 
    }, function() { 
 
     $("#theBox_3").slideUp(500); 
 
    }); 
 

 

 
    $("#StayOpen").hover(
 
    function() { 
 
     $("#theBox_2").slideDown(500); 
 
    }, function() { 
 
     $("#theBox_2").slideUp(500); 
 
    }); 
 
});
body { 
 
    background-color: #eef; 
 
} 
 
#theBox_3, 
 
#theBox_2 { 
 
    display: none; 
 
    border: 1px solid #000; 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: #ddf; 
 
} 
 
#toggleSwitch_j, 
 
#StayOpen { 
 
    background-color: #cacaca; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
This layout will only keep the hidden div visible as long as you point to the link 
 
<br>You'll never be able to reach anything inside the div 
 
<br><a href="#" id="toggleSwitch_j">jQuery Hover</a> 
 
<div id="theBox_3">Peek-a-boo!</div> 
 

 
<hr>This layout puts the link and hidden div inside a wrapper - hovering anywhere inside the wrapper expands the hidden div, so you can reach content inside it. This would be handy if you need to put links or form elements inside the hidden div, instead of 
 
just text to read. 
 
<div id="StayOpen"> 
 
    <a href="#" id="toggleSwitch_2">jQuery Hover</a> 
 
    <div id="theBox_2">Peek-a-boo!</div> 
 
</div>

私の答えが遅れて申し訳ありません
+0

、そしてあなたの答えをありがとうございました - 実際に私はスタックオーバーフローに希望を失った、としませんでした答えを得ることを期待しているので、私はチェックすることを迷惑にならず、それは残念です。 その間に私は既に働いていた別の解決策を見つけました - しかし、あなたのコメントを読んで、私は今私の主な誤りであったことを理解しています。私は、ホバーイベントが二重であるとは考えておらず、ボタン自体からマウスを出し入れするという事実も認識していませんでした。あなたの答えはこの問題を解決するのに役立ちました。ありがとう! – Kermit