javascript - 带有Javascript的Mouseover和Mouseout

我正在尝试为mouseover和mouseout调用函数。我尝试过各种运气不好的解决方案。

这就是我的位置。请解释该解决方案，因为我有兴趣了解此问题，而不仅仅是寻找快速解决方案。

function MouseOver(elem) {
document.getElementsByName(elem).style.color("white");
}

function MouseOut(elem) {
document.getElementsByName(elem).style.color("black");
}

<nav id="frame-link">
<a href="index.html" name="home" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Home</a>
</nav>

最佳答案

当您调用内联事件处理程序时（例如使用onmouseover="MouseOver(this);"进行处理），您会将对元素本身的引用传递给函数，而在函数中，您正在获取该引用并将其分配给变量elem。

然后，您通常会在函数中使用elem，例如elem.style.color = "white";，而不是使用括号，因为您不是在运行函数，而是在更改属性。

function MouseOver(elem) {
  elem.style.color = "white";
}

function MouseOut(elem) {
  elem.style.color = "black";
}

<nav id="frame-link">
  <a href="index.html" name="home" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Home</a>
</nav>