2011-12-01 134 views
1

我已经设置了我的页面,这样当用户将鼠标悬停在图像上时,文本就会出现并显示一些泡泡。有十一个鱼的图像,每个人都有自己的文字和泡泡。我确定在包含鱼的div中没有​​重叠,但是当一个鼠标悬停在特定图像上时,其他图像的文本也显示出来。这太让人分心了,因为用户一次只想看到一个文本。我该如何解决这个问题?以下是该页面的链接:http://arabic001.com/colorsjs溢出函数溢出

回答

1

我很好奇自己,对于这个问题常见的解决方案是什么。 当我遇到这种情况时,我使用jQuery的hoverIntent插件。

,如果你去这条路线,你会改变每个.mouseOver(),.mouseOut()以下几点:

从这个

  $('#fishBlue').mouseover(function() {  
       $('#bubblesBlue').toggle('slow'); 
       $('#textBlue').toggle('slow'); 
      }); 

      $('#fishBlue').mouseout(function() {     
       $('#bubblesBlue').hide('slow'); 
       $('#textBlue').toggle('slow'); 
      }); 

这个

$('#fishBlue').hoverIntent(function() { 
       $('#bubblesBlue').toggle('slow'); 
       $('#textBlue').toggle('slow'); 
      }); 
}, function() { 
       $('#bubblesBlue').hide('slow'); 
       $('#textBlue').toggle('slow') 
}); 

的hoverIntent plu杜松子酒至少需要的jQuery 1.5.1

其他尖端

我将抽象的东西多一点,为什么改写为每条鱼一样的东西。

也许使用类

$('.fish').hoverIntent(function() { 
       $(this).next('.bubble').toggle('slow'); 
       $(this).next('.text').toggle('slow'); 
      }); 
}, function() { 
       $(this).next('.bubble').hide('slow'); 
       $(this).next('.text').toggle('slow') 
}); 
+0

我看了看我的索引文件,它说我有JS 1.4。我该如何做到1.5.1? – L1900

+1

看到你是如何使用谷歌jQuery的只是改变版本号 - 检查出可用的版本:http://code.google.com/apis/libraries/devguide.html#jquery – matchew

+0

如果我想使用类的像matchew推荐的悬停功能,我是否需要在html索引文件中进行任何更改? – L1900