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);  
    }); 
});