Question

我想要实现的目标是：当您将鼠标悬停在“信天翁”ID图像上时，“skua”id图像会淡出。就像当前的代码一样，无论鼠标在页面上（或关闭）的哪个位置，一旦页面加载，skua图像就会淡出。
信天翁和贼鸥图像绝对位于单独的样式表中。

.gallery-container {
    display: block;
}

@media screen and (max-width: 600px) {
    .gallery-container {
        display: none;
    }
}

我尝试的其他事情是这样的：
document.getElementById("#albatross").onmouseover = fadeRest(); function fadeRest() { $("#skua").fadeOut(); } 使用相同的fadeRest函数，其行为与上面的代码相同。但是，如果我给信天翁增加一个＃，那么无论我是否将鼠标悬停在信天翁上，天使图像都不会再褪色。
我将fadeRest功能更改为警报，以查看鼠标悬停是否在所有，并没有得到警报所以好像没有添加事件监听器。

任何帮助我理解我做错的事情都将非常感谢，谢谢。

Answer 1

您将回调分配给功能的重置而不是功能本身。换句话说，您立即致电fadeReset。

请改为尝试：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

由于你正在使用jQuery，你可以这样做

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

您还可以将$.on()与事件名称

一起使用

＆＃13;

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

＆＃13;

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

＆＃13;

onmouseover函数触发而没有moused over元素

2 个答案: