鼠标悬停和鼠标悬停 w/ Javascript答案

【问题标题】：Mouseover & Mouseout w/ Javascript鼠标悬停和鼠标悬停 w/ Javascript
【发布时间】：2017-10-14 18:27:56
【问题描述】：

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

【问题讨论】：

this 在你的上下文中将引用元素本身，你不需要重新查询它的 dom。将您的函数体更改为 elem.style.color = blah; 也，.style.color 不是函数。您应该在控制台中得到错误解释。
按 F12 并转到控制台选项卡。在您的页面上点击刷新。
不要使用内联 HTML 事件处理属性。请参阅此处了解原因：stackoverflow.com/questions/43459890/…
为什么不直接使用 CSS 悬停效果？我相信它会提供相同的预期结果。
@ThomasJuranek 是正确的，对于简单地更改悬停时文本的颜色，使用 css 会好得多。但是对于您关于为什么这不起作用的问题，@rlemon 是正确的。您可以将document.getElementsByName(elem).style.color("white"); 更改为elem.style.color = "white"

标签： javascript mouseover mouseout

【解决方案1】：

您需要将 JavaScript 代码放在 <script> 标记中。
elem 不是名称，而是导致事件处理程序被调用的 DOM 元素的实际引用。见what's "this" in javascript onclick?
以小写字母开头的函数名是一种很好的风格。
与 apply attributes by calling a function 的 jQuery 不同，原生 JavaScript elem.style.color 是可写字符串属性。您需要分配一个值。

<nav id="frame-link">
<a href="index.html" name="home" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">Home</a>
</nav>
<script>
function mouseOver(elem) {
  elem.style.color = "white";
}

function mouseOut(elem) {
  elem.style.color = "black";
}
</script>

或者，使用onmouseover="mouseOver(event)" 并写：

function mouseOver(event) {
  var elem = event.target;
  elem.style.color = "white";
}

如果需要，这将允许您访问发生的event 的更多属性。

【讨论】：

【解决方案2】：

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

然后你通常会在你的函数中使用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>

【讨论】：

@Christoph 没有参数，但 OP 要求 JavaScript 解释，所以我坚持他们想要的。
完全同意，我只是将其作为旁注提及。也许 OP 只使用 JS，因为他们不知道使用 css 实际上更容易；）

【解决方案3】：

如果真的只是样式需要更改，那么您根本不需要 JavaScript。您可以将 CSS 与 :hover 伪类一起使用：

.normal { background-color:#e0e0e0; }
.normal:hover { background-color:yellow; }

<nav id="frame-link">
<a href="index.html" name="home" class="normal">Home</a>
</nav>

但是，如果它不仅仅是样式，那么您会希望以现代的、基于标准的方式来做这件事。不要使用内联 HTML 事件处理属性（请参阅 here 了解原因）。这种语法需要更多的打字，但它带来的所有好处都值得。

最后，（再一次），如果您追求的是样式，使用类比使用单个样式属性要简单得多。

// Get a reference to the element that needs to be worked with
var theLink = document.querySelector("a[name='home']");

// "Wire" the element's events
theLink.addEventListener("mouseover", mouseOver);
theLink.addEventListener("mouseout", mouseOut);

function mouseOver() {
  theLink.classList.add("hovered");
}

function mouseOut() {
  theLink.classList.remove("hovered");
}

.normal { background-color: #e0e0e0; }
.hovered { background-color: yellow; }

<nav id="frame-link">
  <a href="index.html" name="home" class="normal">Home</a>
</nav>

【讨论】：

+1 虽然 OP 使用他的方法寻找问题，但他/她肯定会从概述现代清洁解决方案中受益。
@le_m 谢谢。当 OPs 方法是错误的时候，我们应该总是指出。
也许颠倒了例子，因为第二个确实回答了所问的问题。不知道 OP 的真正动机，OP 的方法在这里不一定是“错误的” - 它可能只是学习如何调用问题中所述的函数。话虽这么说，我更喜欢您为代码添加事件侦听器的方法，尽管它也没有直接提供对 OPs 问题的答案，这里是关于标记中的函数调用的“理解”。

【解决方案4】：

这是您使用现代语法的非常简短的解决方案。

<a href="#" onmouseover="musOvr(this);" onmouseout="musOut(this);">Home</a>
<script>
  const musOvr = elem => elem.style.color = '#fff'
  const musOut = elem => elem.style.color = '#000'
</script>

【讨论】：