Hovering over an image changes different div

user_19064467 0
Viewed 45

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>

css html
1 Answers

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>

user_192600380
Related