鼠标悬停和鼠标移开 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

您需要将 JavaScript 代码放入 <script> 标签中。
elem 不是名称，而是导致调用事件处理程序的 DOM 元素的实际引用。参见 what's "this" in javascript onclick?
函数名以小写字母开头是一种很好的风格。
与 jQuery 不同的是，您 apply attributes by calling a function 中的原版 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 的更多属性。

Answer 2

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

Answer 3

如果真的只是样式需要更改，那么您根本不需要 JavaScript。你可以只使用 CSS 和 :hover 伪 class:

.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 了解原因）。这种语法需要更多的输入，但它带来的所有好处都是值得的。

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

// 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>

Answer 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>

鼠标悬停和鼠标移开 Javascript

Mouseover & Mouseout w/ Javascript

javascript

mouseover

mouseout