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";，而不是使用括号，因为您没有运行函数，只是更改属性。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果它真的只是需要改变的样式，那么你根本就不需要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>

Answer 3

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

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

Answer 4

您需要将JavaScript代码放在<script>标记中。
elem不是名称，而是导致调用事件处理程序的DOM元素的实际引用。请参阅what's "this" in javascript onclick?
使用小写字母启动函数名称是一种很好的方式。
与jQuery（{3}}不同，vanilla JavaScript elem.style.color是一个可写的字符串属性。您需要指定一个值。

＆＃13;

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

＆＃13;

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

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

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

鼠标悬停＆amp;带有Javascript的Mouseout

4 个答案: