J查询隐藏隐藏

Question

制作图像滑块。只有当图像悬停在（.myImages）上时才需要显示下一个按钮（btnNext）。我希望它在我mouseOut时消失。问题是使用setTimeout导致了我很大的问题。如果我不小心将图像悬停在Image上， ：{寻找解决方法谢谢你的帮助。

$(document).ready(function(){ 
    $('.myImages').hover(function() { 
     $(this).addClass('transition'); 
     $('.Holder').addClass('transition'); 
     $('.btnNext').css({'margin-left':'70px'}); 
      var that = this; 
    setTimeout(function(){ 
     $('.btnNext').css({'visibility':'visible'}); 
    },500); 
    }, function() { 
     $(this).removeClass('transition'); 
     $('.Holder').removeClass('transition'); 
      $('.btnNext').css({'visibility':'hidden'}); 
    }); 
    }); 

$(document).ready(function(){ 
    $('.btnNext').hover(function() { 
     $('.myImages').addClass('transition'); 
     $('.Holder').addClass('transition'); 
     $('.btnNext').css({'visibility':'visible'}); 
     }, function() { 
      $('.btnNext').css({'visibility':'hidden'}); 
     $(this).removeClass('transition'); 
      }); 
}); 

Answer 1

如果您对以上持有鼠标希望这则：

$(function(){ 
    $('.Holder') 
    .on('mouseover', function() { 
     $('.myImages').addClass('transition'); 
     $(this).addClass('transition'); 
     $('.btnNext').stop(true, true).fadeIn(300); 
    }) 
    .on('mouseout', function() { 
     $('.myImages').removeClass('transition'); 
     $(this).removeClass('transition'); 
     $('.btnNext').stop(true, true).fadeOut(300);  
    }); 
}); 

，或者对myImages悬停：

$(function(){ 
    $('.myImages') 
    .on('mouseover', function() { 
     $(this).addClass('transition'); 
     $('.Holder').addClass('transition'); 
     $('.btnNext').stop(true, true).fadeIn(300); 
    }) 
    .on('mouseout', function() { 
     $(this).removeClass('transition'); 
     $('.Holder').removeClass('transition'); 
     $('.btnNext').stop(true, true).fadeOut(300);  
    }); 
});