javascript - 带有 Javascript 的鼠标悬停和鼠标移出

Question

我正在尝试调用 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>

Answer 1

当您调用内联事件处理程序时，例如使用 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>