Ce que je veux accomplir, c'est ceci: lorsque vous passez la souris sur l'image id "albatros", l'image id "skua" disparaît. Dans l'état actuel du code, l'image skua s'estompe dès que la page se charge, peu importe où la souris est allumée (ou désactivée) sur la page.
Les images d'albatros et de skua sont positionnées de manière absolue dans une feuille de style distincte.

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


J'ai essayé quelque chose d'autre:
document.getElementById("albatross").addEventListener("mouseover", fadeRest()); avec la même fonction fadeRest, qui se comporte de la même manière que le code ci-dessus. Cependant, si j'ajoute un # à l'albatros, l'image du skua ne s'estompera plus, que je passe la souris sur l'albatros ou non.
J'ai changé la fonction fadeRest en alerte pour voir si le survol de la souris était enregistré à tout, et je n'ai pas reçu d'alerte donc il semble que l'auditeur d'événement ne soit pas ajouté.

Tout ce qui m'aide à comprendre ce que je fais mal serait grandement apprécié, merci.

0
mt-everer 17 janv. 2017 à 05:04

2 réponses

Meilleure réponse

Puisque vous utilisez jQuery, vous pouvez le faire de cette façon

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

Si vous vouliez organiser un événement 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>

Vous pouvez également utiliser $.on() avec le nom de l'événement

$('#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>
1
Michael Coker 17 janv. 2017 à 02:13

Vous affectez le rappel à la réinitialisation de la fonction au lieu de la fonction elle-même. En d'autres termes, vous appelez fadeReset immédiatement.

Essayez plutôt ceci:

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
Max Sindwani 17 janv. 2017 à 02:09