2011-09-15 34 views
0

好了,所以让我给一点背景的问题是什么...问题与悬停工具提示的jQuery

我们的客户有一个有9个独特的联系,这上空盘旋时淡出的主页活动区潜在的默认背景图像与当时与悬停链接相关联的前方图像时,工具提示在该链接上被发射并且具有图库描述和链接到图库。在鼠标移出时,默认图像会重新出现在链接后面。

问题是,当鼠标悬停在链接上,然后将鼠标悬停在相应的工具提示上时,鼠标事件触发链接。客户希望图片在鼠标悬停在工具提示上时也可以保留。下面是代码我目前有:

$("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"); 
      });  
    }); 

这里是HTML标记

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

我想我可能使用的.next()在jQuery库目标为每个建筑工具提示然而,我无法将它保持在悬停状态,并用鼠标将其替换为默认值。有任何想法吗?提前致谢!

-Derek

+0

为什么你不使用.tooltip上的mouseout事件? –

回答

0

如果要测试从链路的鼠标移出内的提示鼠标悬停,你可以阻止它。但是,您必须将鼠标移到工具提示上,才能测试鼠标是否不在按钮上。所以:只要鼠标在两者之一上,背景就会保持。一旦你将鼠标移出,背景就会重置。

+0

感谢您的信息,你可能会介意给我一个简单的例子,如果你不介意?我之前没有使用过.bind(),如果你能提供一个简单的例子,那将会非常棒。 – dcav

+0

对不起,我刚才看到你的问题。你还需要一个.bind()的例子吗? – Simon