이미지 위에 하이퍼 링크 위치 지정

Question

이미지 위에 링크를 배치하는 데 문제가 있습니다. 이 링크에 대해 불투명도와 호버 상태를 사용하고 있으며 그 결과를 얻을 수는 있지만 예상 한 결과가 아닙니다. 내가 원하는대로 호버가 작동하지 않습니다. 나는이 일을하는 더 좋은 방법이 있다고 믿습니다. 누군가 나를 도울 수 있기를 바랍니다. 감사!

<ul id="content-images"> 
<li><img class="show2" src="img/some_img.png" width="176" height="168"></li> 
<li><img class="show2" src="img/some_img2.png" width="176" height="168"></li> 
<li><img class="show2" src="img/some_img3.png" width="176" height="168"></li> 
</ul> 
<span class="show"><a href="#">Link1</a></span> 
<span class="show"><a href="#">Link2</a></span> 

그리고 CSS 코드 :이 링크 및 이미지가 "하나로 행동"하려면

.show { 
    opacity:0.8; 
    position:relative; 
    top:10px; 
    left:10px; 
    } 
.show:hover { 
    opacity:1.0; 
    } 
.show2 { 
    left: 1px; 
    opacity: 0.8; 
    position: relative; 
    top: -39px; 
    } 
.show2:hover { 
    opacity:1.0 
    } 

Answer 1

, 당신은 자바 스크립트를 사용해야 여기

는 HTML 코드입니다. 아래 링크를 클릭하면 매우 단순한 방식으로 링크와 이미지에서 어떻게 작동하는지 예제를 작성했습니다. 라이브 데모는 JSFiddle에서 볼 수 있습니다 : JSFiddle

HTML :

<ul id="content-images"> 
<li><img id="image1" class="show2" src="http://placehold.it/100x100" width="176" height="168"></li> 
</ul> 
<span id="link1" class="show"><a href="#">Link1</a></span> 

JS (JQuery와) :

$(document).ready(function(){ 
    //hover image 
    $('#image1').hover(function(){ 
     $(this).fadeTo("slow",0.8); 
     $("#link1").fadeTo("slow",0.8); 
    }); 
    //reestablish previous display when mouse out 
    $('#image1').mouseout(function(){ 
     $(this).fadeTo("slow",1); 
     $("#link1").fadeTo("slow",1); 
    }); 
    //hover link 
    $('#link1').hover(function(){ 
     $(this).fadeTo("slow",0.8); 
     $("#image1").fadeTo("slow",0.8); 
    }); 
    //reestablish previous display when mouse out 
    $('#link1').mouseout(function(){ 
     $(this).fadeTo("slow",1); 
     $("#image1").fadeTo("slow",1); 
    }); 
}); 

OBS : 당신이 어떤을하지 않으려면 천이 애니메이션으로, 0에서 "slow" 인수를 제거하십시오.또는 더 빠르게하려면 "fast"으로 변경하십시오.