요소의 여러 레이어에 대한 트리거 호버 동작

Question

나는 그리드가있는 페이지가 있습니다. 이러한 이미지의 불투명도는 처음에 0으로 설정됩니다 (즉, 숨겨 짐). 마우스가 이미지 위로 이동하면 불투명도는 즉시 1로 설정되고 마우스가 이동되면 불투명도가 빠르게 0으로 사라집니다.

$(".CircleImage").hover(
    function() { 
     $(this).fadeTo(0,1); // mouseenter 
    }, 
    function() { 
     $(this).fadeTo(200,0); // mouseleave 
    } 
); 

이제

HTML

<img class="Image" src="./img/foo.png"> 

CSS

.Image { 
    opacity: 0; 
} 

JS를 : : 관련 코드는 지금과 같은 제가 위에서 를 표시 할 몇 가지 링크를 추가 할 이미지 그리드입니다. 여기에 잡기가 있습니다. 이미지가 마우스를 움직이는 동작을 유지하고 싶습니다. 정말 까다로운 점은 각 링크의 텍스트가 여러 이미지에 걸쳐 있고 링크 텍스트 및 이미지의 크기가 창 크기로 동적으로 변경된다는 것입니다.

예를 들어 텍스트에 "click me"이라는 링크가 있고 하나의 특정 창 크기에서 "click"의 "cli"가 하나의 이미지 위에 있고 "me"가 다른 것 위에 있다고 가정 해 보겠습니다. . 나는 "cli"위에 마우스가있을 때 그 아래의 이미지가 나타나고, "me"위에있을 때 그 텍스트 아래의 이미지가 나타나고, 링크가 클릭 될 수있는 것처럼 행동하도록 페이지를 원합니다. .

즉 : 나는 맨 위의 요소뿐만 아니라 그 아래의 요소에 대해서도 호버 동작을 트리거하고 싶습니다.

누구에게이 작업을 수행 할 수있는 방법에 대한 제안이 있습니까?

Answer 1

컨테이너에서 이미지와 링크를 래핑하고 해당 컨테이너의 불투명도를 변경할 수 있습니다.

<span class="imgContainer"> 
    <a href="#">X</a> 
    <img class="Image" src="./img/foo.png" width="100" height="100"> 
</span> 

.imgContainer { 
    opacity: 0.1; 
    width: 100px; 
    height: 100px; 
} 

.imgContainer a { 
    position: absolute; 
} 

DEMO