onmouseover 函数在没有将鼠标悬停在元素上的情况下触发

Question

我想要完成的是：当您将鼠标悬停在 "albatross" id 图像上时，"skua" id 图像淡出。正如目前的代码一样，无论鼠标在页面上（或离开）页面的什么位置，贼鸥图像都会在页面加载后立即淡出。
信天翁和贼鸥图像都绝对位于单独的样式表中.

document.getElementById("#albatross").onmouseover = fadeRest();
function fadeRest() {
  $("#skua").fadeOut();
}

我试过的其他东西是这样的：
document.getElementById("albatross").addEventListener("mouseover", fadeRest()); 具有相同的 fadeRest 函数，其行为方式与上面的代码相同。但是，如果我向信天翁添加#，无论我是否将鼠标悬停在信天翁上，贼鸥图像都不会再褪色。
我将 fadeRest 函数更改为一个警报，以查看鼠标悬停是否被注册根本没有任何警报，所以似乎没有添加事件侦听器。

任何能帮助我理解我做错了什么的东西都将不胜感激，谢谢。

Answer 1

您正在将回调分配给函数的重置而不是函数本身。换句话说，您正在立即呼叫 fadeReset。

试试这个：

function fadeRest() {
  $("#skua").fadeOut();
}
document.getElementById("albatross").onmouseover = fadeRest;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="albatross">
  <div id="skua">Hover over me</div>
</div>

Answer 2

既然你使用的是jQuery，你可以这样做

$('#albatross').hover(function() {
  $("#skua").fadeOut();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="albatross">albatross</div>
<div id="skua">skua</div>

如果你想有一个 mouseleave 事件...

$('#albatross').hover(function() {
  $("#skua").fadeOut();
}, function() {
  $("#skua").fadeIn();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="albatross">albatross</div>
<div id="skua">skua</div>

您还可以将 $.on() 与事件名称一起使用

$('#albatross').on('mouseenter', function() {
  $("#skua").fadeOut();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="albatross">albatross</div>
<div id="skua">skua</div>

onmouseover 函数在没有将鼠标悬停在元素上的情况下触发

onmouseover function triggering without having moused over the element

javascript

jquery

html

mouseover

onmouseover