Блог

Я пытаюсь получить ссылку, чтобы показать окно с картинкой в нем, с помощью 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>
  

Используйте 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">