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

如何在悬停链接时显示图片（鼠标悬停/鼠标移开）？

1 个答案: