javascript - 隐藏的jQuery可见性

制作图像滑块。只希望将鼠标悬停在（.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');
           });
});

最佳答案

如果您希望将鼠标悬停在Holder上，则：

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