动画在Javascript上不起作用，因为鼠标关闭

Question

我的脚本不起作用。我试图让它改变鼠标上的css样式，但它不起作用

const robert = document.getElementById('robert');
function animationOver() {
robert.style.margin = '0.8rem 2.7rem 1.2rem 0rem';
robert.style.boxShadow = '0 0 0 #f1faee';
robert.style.transition = '0.5s';
}
function animationOut() {
robert.style.margin = '0rem 3.5rem 2rem 0rem';
robert.style.boxShadow = '0.8rem 0.8rem #e63946'
robert.style.transition = '0.5s'
}
robert.onmouseover = animationOver();
robert.onmouseleave = animationOut();

我是编程新手，所以我不知道还能尝试什么。

Answer 1

我认为它不起作用，因为您正在为调用函数的结果赋值，而不是函数本身。

你所做的就是说"；当用户悬停鼠标时，使用我的函数返回的任何内容"；这没什么，所以没有多大意义。

相反，你需要做"；当用户悬停鼠标时，调用我的函数"；

你是这样做的：

robert.onmouseover = animationOver;
robert.onmouseleave = animationOut;

Answer 2

这是一个纯css版本。不确定这是否是你想要的。您可能想要使用javascript来实现鼠标悬停/输出效果，这是有原因的，但您提供的示例在没有javascript的情况下很容易实现

#robert {
width: 100px;
height: 100px;
background: #222;
transition:  0.5s;
margin: 0rem 3.5rem 2rem 0rem;
box-shadow: 0.8rem 0.8rem #e63946;
}
#robert:hover {
margin: 0.8rem 2.7rem 1.2rem 0rem;
box-shadow: 0 0 0 #f1faee;
}

<div id='robert'></div>