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

如果您想在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);    
    });
});

J查询可见性隐藏

1 个答案: