Отображение картинки при наведении на текст

Question

Необходимо организовать отображение картинки при наведении на блок

function foto(num) {
                   myFoto.src="img/"+num+".jpg"
}

<html>
<body>
<div style="border-style:outset; width:200; height:300;">
    <div style="cursor: hand;" 
    onmouseover="this.style.color='red'; foto(1);" 
    onmouseout="this.style.color='black';">
        Первая фотография</div>
    <div style="cursor: hand;" 
    onmouseover="this.style.color='red'; foto(2);" 
    onmouseout="this.style.color='black';">
        Вторая фотография</div>
    <div style="cursor: hand;" 
    onmouseover="this.style.color='red'; foto(3);" 
    onmouseout="this.style.color='black';">
        Третья фотография</div>
    <div style="cursor: hand;" 
    onmouseover="this.style.color='red'; foto(4);" 
    onmouseout="this.style.color='black';">
        Четвертая фотография</div>
    <div style="cursor: hand;" 
    onmouseover="this.style.color='red'; foto(5);" 
    onmouseout="this.style.color='black';">
        Пятая фотография</div>
</div>
<div style="position: absolute; top: 15; left: 250;
border-style: outset; padding: 10; width: 200;
height: 300; text-align: center;">
<img src="/img/1.jpg" id="myFoto" height="280">
</div>
<div style="position: absolute; top: 15; left: 250;
border-style: outset; padding: 10; width: 200;
height: 300; text-align: center;">
<img src="/img/2.jpg" id="myFoto" height="280">
</div>
<div style="position: absolute; top: 15; left: 250;
border-style: outset; padding: 10; width: 200;
height: 300; text-align: center;">
<img src="/img/3.jpg" id="myFoto" height="280">
</div>
<div style="position: absolute; top: 15; left: 250;
border-style: outset; padding: 10; width: 200;
height: 300; text-align: center;">
<img src="/img/4.jpg" id="myFoto" height="280">
</div>
<div style="position: absolute; top: 15; left: 250;
border-style: outset; padding: 10; width: 200;
height: 300; text-align: center;">
<img src="/img/5.jpg" id="myFoto" height="280">
</div>
</body>
</html>

Answer 1

Не уверен, что я Вас не правильно понял. Но картинка отображается при наведении на текст.

.popup-img-wrapper span{
  border-radius: 5px 5px 5px 5px;
  visibility: hidden;
  position: absolute;
  left: 20vw;
  background: #f1eaea;
  box-shadow: -2px 2px 10px -1px #2f2e2e;  
  border-radius: 5px;
  width: auto;
  z-index: 9999;
}
.popup-img-wrapper:hover span{
visibility: visible;
}

<p class="popup-img-wrapper" href="/">НАВЕДИ НА МЕНЯ КУРСОР
  <span>
    <img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/43/43961c31107c051878437cc7fd47d178577b7a89_full.jpg">
  </span>
</p>

Answer 2

const hover = document.querySelectorAll('.hover');
const imgParent = document.querySelectorAll('.img-parent');

hover.forEach((s, i) => {
  s.addEventListener('mouseenter', () => {
    hover.forEach((s, i) => {
      imgParent[i].classList.remove('z');
    })
    imgParent[i].classList.add('z');

  })
})

.hover {
  cursor: pointer;
  padding: 5px;
  margin: 15px;
}

.hover-parent {
  border-style: outset;
  width: 200;
  height: 300;
}

.img-parent {
  position: absolute;
  top: 15;
  left: 250;
  border-style: outset;
  padding: 10;
  width: 200;
  height: 300;
  text-align: center;
  z-index: auto;
}

.z {
  z-index: 1;
}

<div>
  <div class="hover">
    Первая фотография</div>
  <div class="hover">
    Вторая фотография</div>
  <div class="hover">
    Третья фотография</div>
  <div class="hover">
    Четвертая фотография</div>
  <div class="hover">
    Пятая фотография</div>
</div>
<div class="img-parent">
  <img src="https://dummyimage.com/280x280/ff9900/43455e.jpg&text=1" id="myFoto" height="280">
</div>
<div class="img-parent">
  <img src="https://dummyimage.com/280x280/ff9900/43455e.jpg&text=2" id="myFoto" height="280">
</div>
<div class="img-parent">
  <img src="https://dummyimage.com/280x280/ff9900/43455e.jpg&text=3" id="myFoto" height="280">
</div>
<div class="img-parent">
  <img src="https://dummyimage.com/280x280/ff9900/43455e.jpg&text=4" id="myFoto" height="280">
</div>
<div class="img-parent">
  <img src="https://dummyimage.com/280x280/ff9900/43455e.jpg&text=5" id="myFoto" height="280">
</div>

БЛОГ НА HUSL

Отображение картинки при наведении на текст

Ответы (2 шт):