Show Describing Text On Image(icon) Hover

Issue

I want the text description for the icons to appear next to the
Mounting Options: – So for example when I hover the first icon it
returns Mounting Options: Top Plate – Then disappears when I hover
off and works for every icon. I have tried multiple variations in JavaScript and HTML and can’t seem to get it to work properly.

See Image for more Details

function showOption(image) {

  console.log('In showOption')

  // Get the hovered img and it's container.
  // const image = e.target
  const mounting_images = image.parentNode

  console.log(image)
  console.log(mounting_images)

  // Get the index of the hovered image within its container.
  const mounting_image_index = Array.prototype.indexOf.call(mounting_images.children, image)

  console.log(mounting_image_index)

  // Get the main bullet-text container
  const container = mounting_images.previousSibling

  console.log(container)

  // Get the mounting options container.
  const mounting_options = container.querySelector('.mounting-options')

  console.log(mounting_options)

  // Get the option corresponding to the hovered icon.
  const option = mounting_options.childNodes[mounting_image_index + 1]

  console.log(option)

  // Display the option.
  console.log('Displaying option...')
  option.style.display = 'block'
}

function hideOptions() {

  // Select ALL elements with the class 'option'
  const options = document.getElementsByClassName('option')

  // Hide every option.
  for (let option of options) {
    option.style.display = 'none'
  }

}
.option {
  display: none;
}

.mounting-icon {
  height: auto;
  width: auto;
  padding-top: 5px;
  margin: -3px;
  margin-top: -.5rem;
  margin-bottom: 0rem;
}
<li class="mounting-options">
  <b>Mounting Options:</b>
  <span class="option">Top Plate</span>
  <span class="option">Threaded Stem</span>
  <span class="option">Grip Neck Stem</span>
  <span class="option">Grip Ring Stem</span>
  <span class="option">Expanding Stem</span>
</li>
</ul>
<p class="mounting-spacing">
  <img onmouseenter="showOption(this)" onmouseleave="hideOptions" src="https://casterdepot.com/media/icons/mounting-icons/top-plate-icon.jpg" class="mounting-icon" title="Top Plate" alt="top-plate">
  <img onmouseenter="showOption(this)" onmouseleave="hideOptions" src="https://casterdepot.com/media/icons/mounting-icons/threaded-stem-icon.jpg" class="mounting-icon" title="Threaded Stem" alt="">
  <img onmouseenter="showOption(this)" onmouseleave="hideOptions" src="https://casterdepot.com/media/icons/mounting-icons/grip-neck-stem-icon.jpg" class="mounting-icon" title="Grip Neck Stem" alt="">
  <img onmouseenter="showOption(this)" onmouseleave="hideOptions" src="https://casterdepot.com/media/icons/mounting-icons/grip-ring-stem-icon.jpg" class="mounting-icon" title="Grip Ring Stem" alt="">
  <img onmouseenter="showOption(this)" onmouseleave="hideOptions" src="https://casterdepot.com/media/icons/mounting-icons/expanding-stem-icon.jpg" class="mounting-icon" title="Expanding Stem" alt="">
</p>
<a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/regent-series.html">
  <button class="cd-button" type="button">Learn More</button>
</a>

Solution

Here’s a version with jquery. I hope you can use it, or adapt it to js.

// get the parent of the hovered image (the paragraph), then the children of
// the paragraph (the images), then the index of the hovered image.
// Then get all the options, then the option with the same index as
// the image, and show that option.
function showOption(image) {
  let idx = $(image).parent().children().index(image);
  $(".option").eq(idx).css("display", "block");
}

function hideOptions(image) {
  let idx = $(image).parent().children().index(image);
  $(".option").eq(idx).css("display", "none");
}
.option {
  display: none;
}

.mounting-icon {
  height: auto;
  width: auto;
  padding-top: 5px;
  margin: -3px;
  margin-top: -.5rem;
  margin-bottom: 0rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="mounting-options">
  <b>Mounting Options:</b>
  <span class="option">Top Plate</span>
  <span class="option">Threaded Stem</span>
  <span class="option">Grip Neck Stem</span>
  <span class="option">Grip Ring Stem</span>
  <span class="option">Expanding Stem</span>
</li>
</ul>
<p class="mounting-spacing">
  <img onmouseenter="showOption(this)" onmouseleave="hideOptions(this)" src="https://casterdepot.com/media/icons/mounting-icons/top-plate-icon.jpg" class="mounting-icon" title="Top Plate" alt="top-plate">
  <img onmouseenter="showOption(this)" onmouseleave="hideOptions(this)" src="https://casterdepot.com/media/icons/mounting-icons/threaded-stem-icon.jpg" class="mounting-icon" title="Threaded Stem" alt="">
  <img onmouseenter="showOption(this)" onmouseleave="hideOptions(this)" src="https://casterdepot.com/media/icons/mounting-icons/grip-neck-stem-icon.jpg" class="mounting-icon" title="Grip Neck Stem" alt="">
  <img onmouseenter="showOption(this)" onmouseleave="hideOptions(this)" src="https://casterdepot.com/media/icons/mounting-icons/grip-ring-stem-icon.jpg" class="mounting-icon" title="Grip Ring Stem" alt="">
  <img onmouseenter="showOption(this)" onmouseleave="hideOptions(this)" src="https://casterdepot.com/media/icons/mounting-icons/expanding-stem-icon.jpg" class="mounting-icon" title="Expanding Stem" alt="">
</p>
<a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/regent-series.html">
  <button class="cd-button" type="button">Learn More</button>
</a>

Answered By – wazz

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.