hover link (mouseover/mouseout) 时如何显示图片？

Question

我正在尝试让 link 显示一个带有图片的框，其中 mouseover 和 mouseout。我尝试了一个数组，但无法从中得到任何结果，现在，这是我拥有的代码（它给我的结果与数组相同）。

我得到了要显示的图像，但对于所有 link，我只得到了第一个。当我使用数组时我得到了相同的结果（所有 link 都显示一张图片，但只显示第一张图片），但我想我只是没能将正确的图片与正确的 link 连接起来。

有人可以帮我解决这个问题吗？

<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">

hover link (mouseover/mouseout) 时如何显示图片？

How to show a picture when hover a link (mouseover/mouseout)?

javascript

mouseover

mouseout