onmouseoverファンクショントリガーが要素の上にマウスを置かずに起動

Question

私が達成したいのはこれです： "albatross" idイメージをマウスオーバーすると、 "skua" idイメージがフェードアウトします。現在のコードでは、マウスがどこにあるかにかかわらず、ページが読み込まれるとすぐにskua画像がフェードアウトします。
albatross画像とskua画像は、別々のスタイルシートに絶対配置されています。上記のコードと同じように動作し、同じfadeRest機能付き
document.getElementById("albatross").addEventListener("mouseover", fadeRest()); ：私が試した他の

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

何かがこれでした。しかし、私が鳥の鳥に＃を加えると、鳥の上にマウスを置いているかどうかに関わらず、skuaの画像はもはや退色しなくなります。
fadeRest関数をアラートに変更して、マウスオーバーが全く登録されていないかどうかを確認しました。イベントリスナーが追加されていないように警告が表示されませんでした。

私が間違っていることを理解するのに役立つものは、ありがとうと感謝します。

Answer 1

あなたは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>

あなたはまた、（とイベント名

$('#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>

Answer 2

コールバックを関数自体の代わりに関数のリセットに割り当てます。つまり、すぐに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>