jQuery显示/隐藏问题

Question

你好我很新的使用jQuery，我试图创建一个菜单，当你对链接进行挖掘时显示不同的图片。它会显示一张图片并隐藏其他4张图片，当您将鼠标移出链接时，它会回到默认图片。我使用悬停功能，但有时当我将鼠标移动到底部时，两个图像（与链接和默认相关的图像）都显示出来，我想知道是否有一些检查可以确保这一点没有发生。这是我的代码的样子。

$("#blog-img").hide(); 
    $("#contact-img").hide(); 
    $("#headturner-img").hide(); 
    $("#work-img").hide(); 

    $("#blog").hover(
     function(){ 
        $("#default").hide(); 
      $("#contact-img").hide(); 
      $("#headturner-img").hide(); 
      $("#work-img").hide(); 
      $("#blog-img").show("slow"); 
     }, 
     function(){ 
      $("#blog-img").hide(); 
      $("#default").show("slow");  
      } 
    ); 

我很乐意帮助我解决这个问题。

Answer 1

您可能会通过使用计时来显示图像来创建竞赛条件。

当两个图像都显示时，可能是因为至少有一个Shows已在第一个执行完成之前执行过。这可能会发生，当你移动部分 - 我们正在说像素 - 进入/离开与悬停对象。

我推荐使用CSS来解决这个问题。它比使用Javascript更干净。