在图像上显示描述文本（图标）悬停

Question

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>

Answer 1

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>

Answer 2

This is a JavaScript vanilla simplified approach that you might like.

 var icon = document.querySelector(".mounting-spacing"), icons = icon.children, options = document.querySelector(".mounting-options").children; icon.onmouseover = icon.onmouseout = showOption; function showOption( e,i ) { if( !/img/i.test(e.target.tagName) )return; i = Array.prototype.indexOf.call( icons, e.target )+1; if( e.type == "mouseover" )options[i].style.display = "block"; if( e.type == "mouseout" )options[i].style.display = ""; }

 .option { display: none; } .mounting-spacing img { 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 src="https://casterdepot.com/media/icons/mounting-icons/top-plate-icon.jpg"> <img src="https://casterdepot.com/media/icons/mounting-icons/threaded-stem-icon.jpg"> <img src="https://casterdepot.com/media/icons/mounting-icons/grip-neck-stem-icon.jpg"> <img src="https://casterdepot.com/media/icons/mounting-icons/grip-ring-stem-icon.jpg"> <img src="https://casterdepot.com/media/icons/mounting-icons/expanding-stem-icon.jpg"> </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>