Question

当我用鼠标输入鞋 1 时，我希望文本 1 的不透明度为 1 并降低一些像素，然后当我鼠标离开时，我希望文本 1 回到其原始位置。我希望每次我用鼠标捕捉到鞋 1 时都会发生这种情况。但发生的事情是，当我用鼠标输入它时，它一切正常，文本移动到它的 px 位置，然后当我离开鼠标并再次输入它时，它不起作用，文本 1 没有出现。

//shoeanim
.shoe-7:hover{
    top: 130px;
}
.textfadein{
    animation: textfadein 1s ease;
    animation-fill-mode: forwards;
}
.textfadein2{
    animation: textfadein 1s ease;
}
@keyframes textfadein{
    to{
        top: 280px;
        opacity: 1;
    }
}
@keyframes textfadein2{
    to{
        top: 271px;
        opacity: 0;
    }
}

const shoe1 = document.querySelector('.shoe-7');
const text1 = document.querySelector('.vans');

shoe1.addEventListener('mouseenter', () =>{
    text1.classList.add('textfadein');
});
shoe1.addEventListener('mouseleave', () =>{
    text1.classList.remove('textfadein');
    text1.classList.add('textfadein2');
});

Answer 1

实现鼠标离开功能存在一些问题。

首先，在 CSS 中，textfadein2 类与 textfadein 类具有相同的关键帧名称。应该是

.textfadein2{
    animation: textfadein2 1s ease;
}

其次，当鼠标移动到元素中添加textfadein类时，textfadein2类不会被移除。由于两个类都在那里，因此将使用级联最下方的类。试试这个：

shoe1.addEventListener('mouseenter', () =>{
    text1.classList.add('textfadein');
    text1.classList.remove('textfadein2');
});

动画帮助（ID：1738EH）

1 个答案: