問題jQueryの

Question

[OK]をので、私たちのクライアントはオーバーフェードアウトホバリング9つのユニークなリンクを、持っているホームページのキャンペーン面積を有する

...私は問題が何であるかについての少し背景を与えてみましょうその時にホバリングされたリンクに関連付けられた正面画像を有する基礎となるデフォルトの背景画像と、そのリンクの上にツールチップがギャラリー記述およびギャラリーへのリンクと共に発射される。マウスを離すと、デフォルトの画像がリンクの後ろに再び表示されます。

問題は、リンク上にマウスを乗せて、対応するツールチップにカーソルを合わせると、リンクのmouseoutイベントがトリガーされることです。クライアントは、ツールチップ上にマウスポインタを置いたときにもイメージが保持されるようにします。ここで

$("a#building1").mouseover(function() { 

    $("#main_image").fadeOut(1, function(){ 
     $("#main_image").load(function() { //avoiding blinking, wait until loaded 
     $("#main_image").fadeIn(); 
     }); 

     $("#main_image").attr("src", "link-to-image-here"); 

    }); 
// each unique link has a class of building 
$("a.building").mouseout(function() { 

      $("#main_image").fadeOut(1 ,function(){ 
      $("#main_image").load(function() { //avoiding blinking, wait until loaded 
       $("#main_image").fadeIn();  
       }); 
      $("#main_image").attr("src", "/images/banners/default.png"); 
      });  
    }); 

私はおそらく各建物のツールチップをしかしターゲットにjQueryライブラリに.next（）を使用することができると思った

<a id="building1" class="building" href="#"></a> 
     <div class="tooltip"> 
     <span class="event-title">Event title</span> 
     <span class="location">Event location</span> 
     <a href="link-to-gallery" class="view-photos-btn">View Wedding Photos</a> 
     </div> 

HTMLマークアップされています。ここに私は現在持っているコードがありますマウスを動かしたときにイメージをホバリングして置き換え、デフォルトに置き換えるのは問題になります。何か案は？前もって感謝します！

-Derek

Answer 1

あなたがリンクのマウスアウトの中から、ツールチップにマウスオーバーをテストしたい場合は、それを防ぐことができます。しかし、マウスがボタンの上にないかどうかをテストするツールチップにマウスアウトをバインドする必要があります。そう：マウスが両方のいずれかの上にある限り、背景はそのままです。両方をマウスアウトすると、バックグラウンドがリセットされます。