Onmouseover-Funktion Triggerung ohne Maus über das Element

Question

Was ich erreichen möchte, ist dies: wenn Sie Mouseover der "Albatros" ID Bild, blendet die "Skua" ID Bild aus. Wie der aktuelle Code lautet, wird das Skua-Bild ausgeblendet, sobald die Seite geladen wird, unabhängig davon, wo sich die Maus auf der Seite befindet (oder nicht).
Sowohl Albatros- als auch Skua-Bilder sind absolut in einem separaten Stylesheet positioniert.

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

Etwas anderes habe ich versucht, war dies:
document.getElementById("albatross").addEventListener("mouseover", fadeRest()); mit derselben fadeRest-Funktion, die über die gleiche Art und Weise wie der Code verhält. Wenn ich jedoch ein # zu Albatros hinzufüge, wird das Skua-Bild nicht mehr verblassen, egal ob ich Maus über den Albatros oder nicht.
Ich habe die Funktion fadeRest in eine Warnung geändert, um zu sehen, ob der Mouseover überhaupt registriert wurde, und habe keine Warnung erhalten, so als ob der Ereignis-Listener nicht hinzugefügt wird.

Alles, was mir hilft zu verstehen, was ich falsch mache, wäre sehr dankbar, danke.

Answer 1

Da Sie jQuery verwenden, können Sie es auf diese Weise

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

tun Wenn Sie wollten ein mouseleave-Ereignis zu haben ...

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

Sie auch $.on() mit dem Ereignisnamen

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

Sie weisen den Callback dem Zurücksetzen der Funktion statt der Funktion selbst zu. Mit anderen Worten, Sie rufen sofort fadeReset an.

Versuchen Sie stattdessen:

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>