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

【问题标题】：onmouseover function triggering without having moused over the elementonmouseover 函数在没有将鼠标悬停在元素上的情况下触发
【发布时间】：2017-05-31 23:23:29
【问题描述】：

我想要完成的是：当您将鼠标悬停在“albatross”id 图像上时，“skua”id 图像会淡出。正如当前的代码所示，无论鼠标在（或离开）页面的哪个位置，只要页面加载，skua 图像就会淡出。
信天翁和 skua 图像都绝对定位在单独的样式表中。

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

我尝试过的其他方法是：
document.getElementById("albatross").addEventListener("mouseover", fadeRest()); 使用相同的 fadeRest 函数，其行为方式与上面的代码相同。但是，如果我在信天翁上添加#，无论我是否将鼠标悬停在信天翁上，贼鸥图像都将不再褪色。
我将 fadeRest 函数更改为警报，以查看鼠标悬停是否已被注册，并且没有收到任何警报，因此似乎没有添加事件侦听器。

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

【问题讨论】：

fadeRest() with () 表示调用函数。因此，当您尝试在代码中将其设置为鼠标悬停回调时，实际上是调用它，并将回调设置为它的返回值...
这是因为getElementById() 不需要添加#，因为它知道通过ID获取元素 /b>。 jQuery 在选择器中使用 # 和 .，因为这就是它们区分 ID / Class 的方式。 .addEventListener("mouseover", fadeRest()) 也应该是 .addEventListener("mouseover", fadeRest, false); 和 .onmouseover = fadeRest() 应该是 .onmouseover = fadeRest;

标签： javascript jquery html mouseover onmouseover

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：