링크를 가져 왔을 때 사진을 표시하는 방법 (mouseover/mouseout)?

Question

그림이있는 상자에 mouseover 및 mouseout이라는 링크를 표시하려고합니다. 배열을 시도했지만 그 결과를 얻을 수 없었습니다. 그리고 이것은 제가 가지고있는 코드입니다 (배열과 같은 결과를줍니다).

나는 보여줄 이미지를 얻지 만, 나는 모든 링크에 대해서만 첫 번째 것을 얻는다. 나는 배열을 사용할 때 같은 결과를 얻었지만 (모든 링크는 사진을 보여 주지만 첫 번째 사진 만 보여줍니다.) 올바른 그림을 올바른 링크로 연결하지 못했습니다.

누군가 나를 도와 줄 수 있습니까?

<p id="lankar"><a href="#" alt="site1" />Link 1</p> 
<p id="link" class="hide"><img src="img/bild1.jpg"></p> 

<p id="lankar1"><a href="#" alt="site2" />Link 2</p> 
<p id="link1" class="hide"><img src="img/bild2.jpg"></p> 

<p id="lankar2"><a href="#" alt="site3" />link 3</p> 
<p id="link2" class="hide"><img src="img/bild3.jpg"></p> 

<script> 
var links = document.getElementById('lankar'); 
links.addEventListener("mouseover", showBox); 
links.addEventListener("mouseout", hideBox); 
var links1 = document.getElementById('lankar1'); 
links1.addEventListener("mouseover", showBox); 
links1.addEventListener("mouseout", hideBox); 
var links2 = document.getElementById('lankar2'); 
links2.addEventListener("mouseover", showBox); 
links2.addEventListener("mouseout", hideBox); 

function showBox() { 
if(document.getElementById('lankar')) 
document.getElementById('link').style.display = 'block'; 
else if(document.getElementById('lankar1')) 
document.getElementById('link1').style.display = 'block'; 
else if(document.getElementById('lankar2')) 
document.getElementById('link2').style.display = 'block'; 
} 


function hideBox() { 
if(document.getElementById('lankar')) 
document.getElementById('link').style.display = 'none'; 
else if(document.getElementById('lankar1')) 
document.getElementById('link1').style.display = 'none'; 
else if(document.getElementById('lankar2')) 
document.getElementById('link2').style.display = 'none'; 
} 
</script> 

Answer 1

사용 CSS :hover ... 드롭 몇 마크 업의

.lankar { 
 
    display: block 
 
} 
 
.hide { 
 
    display: none; 
 
} 
 
.lankar:hover + .hide, .hide:hover { 
 
    display: block; 
 
}

<a class="lankar" href="#" alt="site1">Link 1</a> 
 
<img class="hide" src="http://placehold.it/150x100/00f"> 
 

 
<a class="lankar" href="#" alt="site1">Link 2</a> 
 
<img class="hide" src="http://placehold.it/150x100/0f0"> 
 

 
<a class="lankar" href="#" alt="site1">Link 3</a> 
 
<img class="hide" src="http://placehold.it/150x100/f00">