Question

我们在悬停时改变了html中的一些内容：

$('.zentriert')
.hover(function(){
    if(!$(this).is(".open")) {
    $(this).animate({opacity: 1}, 150);
    $(this).find('img').css({'position': 'relative'}).animate({top: -10}, 150);
    $(this).find('.beschreibung').css({'display': 'block'}).animate({opacity: 1, top: -10}, 150);
    $(this).addClass('open')
    }})

在mouseout上将所有内容恢复到原始状态的最佳方法是什么？这不起作用：

$('.zentriert')
.mouseout(function(){
    if($(this).is(".open")) {
    $(this).animate({opacity: 0.17}, 150);
    $(this).find('img').animate({top: 10}, 150);
    $(this).find('.beschreibung').animate({opacity: 0, top: 10}, 150).css({'display': 'none'});
    $(this).removeClass('open')
    }})

提前感谢您的帮助！

Answer 1

jQuery中的悬停事件需要2个回调函数。第一个是在用户悬停项目时触发，第二个是在它离开时触发

尝试

$(".zentriert").hover(
   function() {
     if(!$(this).is(".open")) {
    $(this).animate({opacity: 1}, 150);
    $(this).find('img').css({'position': 'relative'}).animate({top: -10}, 150);
    $(this).find('.beschreibung').css({'display': 'block'}).animate({opacity: 1, top: -10}, 150);
    $(this).addClass('open')
    }
   },
   function() {
     if($(this).is(".open")) {
    $(this).animate({opacity: 0.17}, 150);
    $(this).find('img').animate({top: 10}, 150);
    $(this).find('.beschreibung').animate({opacity: 0, top: 10}, 150).css({'display': 'none'});
    $(this).removeClass('open')
    }
   }
);

jquery在mouseout上返回原始状态

1 个答案: