鼠标悬停和鼠标移开，带 Javascript

Mouseover & Mouseout w/ Javascript

提问by Tommy.Collins

I'm trying to call functions for mouseover and mouseout. I've tried a variety of different solutions that I've found here with no luck.

我正在尝试调用 mouseover 和 mouseout 的函数。我尝试了在这里找到的各种不同的解决方案，但都没有运气。

Here's where I'm at. Please explain the solution as I'm interested in understanding the issue and not just looking for a quick fix.

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

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>

回答by j08691

When you call an inline event handler such as you do with onmouseover="MouseOver(this);"you're passing a reference to the element itself to your function, and in your function you're taking that reference and assigning it to the variable elem.

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

You would then normally use elemwithin your function like elem.style.color = "white";, not with parenthesis, as you're not running a function but rather just changing a property.

然后，您通常会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>

回答by Scott Marcus

If it's truly just styling that needs to change, then you don't need JavaScript at all. You can just use CSS with the :hoverpseudo-class:

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

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

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

But, if it's more than just styling, then you'll want to do this the modern, standards-based way. Don't use inline HTML event handling attributes (see herefor why). This syntax is a little more typing, but well worth it for all the benefits it brings.

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

Lastly, (and again), if it is styles that you're after, working with classes is much simpler than working with individual style properties.

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

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

回答by le_m

• You need to put JavaScript code in a <script>tag.
• elemis not the name but the actual reference of the DOM element that caused the event handler to be called. See what's "this" in javascript onclick?
• It is good style to start function names with a lowercase letter.
• Unlike jQuery, where you apply attributes by calling a function, the vanilla JavaScript elem.style.coloris a writable string property. You need to assign a value.

• 您需要将 JavaScript 代码放入<script>标签中。
• elem不是名称，而是导致调用事件处理程序的 DOM 元素的实际引用。看看javascript onclick 中的“this”是什么？
• 以小写字母开头的函数名称是一种很好的风格。
• 与通过调用函数来应用属性的jQuery 不同，vanilla JavaScriptelem.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>

Alternatively, use onmouseover="mouseOver(event)"and write:

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

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

This would allow you to access more properties of the eventthat occurred, if desired.

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