将鼠标悬停在图像上会更改不同的 div

Question

so I have 3 images next to each other and a text box below. I have default text and when I hover over one of the images, I want it to change that text to something else, and then when I hover over the 2nd image it does the same but with different text etc. I'm unsure on how to do this, so any help will be very appreciated!

Here's my HTML:

 <div class="mak-item"> <div class="mak-item-container"> <img data-tilt data-tilt-scale="1.1" class="makitem1" src="images/mak-item-1.png"> <img data-tilt data-tilt-scale="1.1" class="makitem2" src="images/mak-item-2.png"> <img data-tilt data-tilt-scale="1.1" class="makitem3" src="images/mak-item-3.png"> </div> </div> <div class="mak-item-text"> <div class="mak-item-text-wrapper fade-in"> <div id="default-text"> <p class="mak-item-name">Item Name</p> <br> <p class="mak-subtypes">Subtypes</p> <br> <br> <p class="mak-cooldown">Cooldown</p> <p class="mak-cost">Cost</p> <p class="mak-size">Size</p> <br> <br> <p class="mak-effect-heading">Effect</p> <p class="mak-effect">Effect Here</p> <br> <p class="mak-passive-heading">Passive</p> <p class="mak-passive">Passive Here</p> </div> </div> </div>

Answer 1

With this solution, on image hover the desired text will be displayed.

Try this:

 const img = document.querySelectorAll('img'); const text = document.querySelectorAll('.text') img.forEach((element) => { element.addEventListener('mouseover', () => { switch (element.id) { case "img1": text[0].style.display = "block"; break; case "img2": text[1].style.display = "block"; break; case "img3": text[2].style.display = "block"; break; } }) element.addEventListener('mouseout', () => { switch (element.id) { case "img1": text[0].style.display = "none"; break; case "img2": text[1].style.display = "none"; break; case "img3": text[2].style.display = "none"; break; } }) });

 .text { display: none; }

 <div> <img src="na" id="img1"> <img src="na" id="img2"> <img src="na" id="img3"> </div> <div class="text"> <p> This is the first image text </p> </div> <div class="text"> <p> This is the second image text </p> </div> <div class="text"> <p> This is the three image text </p> </div>