onmouseover 함수가 요소 위로 마우스를 갖지 않고 트리거링합니다.

Question

내가 원하는 것은 "알바트 로스"id 이미지를 마우스 오버 할 때 "skua"id 이미지가 희미 해집니다. 현재 코드가 있기 때문에 마우스가 페이지의 어느 위치에 있든 페이지가로드 되더라도 Skua 이미지는 페이드로드 즉시 페이드 아웃됩니다.
알바트 로스와 skua 이미지는 모두 별도의 스타일 시트에 절대적으로 배치됩니다. 위의 코드와 같은 방식으로 동작 같은 fadeRest 기능과
document.getElementById("albatross").addEventListener("mouseover", fadeRest()); : 나는 시도 다른

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

뭔가이 있었다. 그러나 알바트 로스에 #을 추가하면 알바트 로스에 마우스를 올려 놓더라도 skua 이미지가 더 이상 사라지지 않습니다.
fadeRest 함수를 경고로 변경하여 마우스 오버가 전혀 등록되지 않았는지 확인하고 알림이 없으므로 이벤트 리스너가 추가되지 않는 것처럼 보입니다.

내가 잘못하고있는 것을 이해하는 데 도움이되는 모든 것이 크게 감사 할 것입니다. 감사합니다.

Answer 1

, 당신이 이런 식으로

$('#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으로 전화하는 것입니다.

대신보십시오 : 당신이 jQuery를 사용하고 있기 때문에

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>