호버 이펙트 위치 절대 절대

Question

내 문제에는 3 개의 태그가 포함되어 있습니다.

1. 이미지 주위를 돌며 상대적으로 배치되는 래퍼 div.
2. 너비와 높이가 100 % 인 절대 위치에있는 앵커 태그입니다. 이렇게하면 사용자가 이미지의 아무 곳이나 클릭하여 URL로 이동하거나 새 탭에서 마우스 오른쪽 버튼으로 클릭하고 열 수 있습니다.
3. 마지막으로 이미지 태그가 있습니다.

내 목표는 사용자가 이미지를 가리킬 때 이미지에 효과를 추가하는 것입니다. onmousover 알림 속성에서 볼 수있는 것처럼 유일한 문제는 앵커 태그 위에 마우스를 올려 놓는 것만 이미지를 가리킬 때 발생합니다. 그래서 어떻게 든 내 onmouseover를 이미지에 전파해야 할 필요가 있다고 생각합니까? 나는 도움을 청하며 큰 도움이 될 것입니다. 아, 모든 프레임 워크 (jquery, prototype)를 피하십시오. js와 css 만 부탁합니다. 정말 고맙습니다.

<div class="boardPostImage"> 
    <a href="image?id=${image.id}" class="boardPostImageAnchor"></a> 
    <img alt="${boardPost.content}" src="${initParam.imageCropMedium}${image.id}.jpg" onmouseover="alert('hello')" /> 
</div> 

Answer 1

앵커를 이미지와 분리하여 보관하는 것이 좋습니다.

자바 스크립트 솔루션 :

function HoverOverImage() 
{ 
    alert("Hello"); 
} 

function HoverOverAnchor() 
{ 
    //Do the stuff you want 
    //Execute the other function 
    HoverOverImage(); 
} 

<a href="image?id=${image.id}" class="boardPostImageAnchor" onmouseover="HoverOverAnchor()"></a> 

JQuery와 솔루션 :

$("img").mouseover(function(){ 
     alert("Hello"); 
}); 

$("a").mouseover(function(){ 
     $("img").mouseover(); 
});