悬停单独的 div 时需要出现 class

Question

I have a wordpress site, on it I have a row of app like icons. When you hover each button a description should appear underneath in an area created. As they are not in the same div I need to use JavaScript to get this to work but I have tried everything and nothing is working.

I added this to css, the class is of the text to hide.

#installation-popup {
    display: none;
}

and have tried multiple Java ways to get this to appear including these 3 ways:

var element = document.getElementsByClassName('.hvr-grow')[0];

element.addEventListener("mouseover",function(){
    document.getElementsByClassName('#installation-popup')[0].style.display = "block";
});

element.addEventListener("mouseout",function(){
    document.getElementsByClassName('#installation-popup')[0].style.display = "none";
});


$(".hvr-grow").hover(
  function() {
    $('#installation-popup').show()
  },
  function() {
    $('#installation-popup').hide()
  }
);

$(document).ready(function () {
    $(document).on('mouseenter', '.hvr-grow', function () {
        $(this).find("#installation-popup").show();
    }).on('mouseleave', '.hvr-grow', function () {
        $(this).find("#installation-popup").hide();
    }); 
});

How can I do this?

Answer 1

The problem is your selectors are wrong. When using document.getElementsByClassName you shouldn't include the . . Same thing for getElementById , you shouldn't include the # . This code should work for you:

for(let elem of document.getElementsByClassName('hvr-grow')) {
    elem.addEventListener('mouseover', () => {
        document.getElementById('installation-popup').style.display = 'block';
    });

    elem.addEventListener('mouseout', () => {
        document.getElementById('installation-popup').style.display = 'none';
    });
}    

It loops through all the icons with class hvr-grow and adds event listeners to each one. I tried it on your site and it works.

Answer 2

You can use closest to find closest class to img and then find tooltop to either show or hide.

Demo Code :

 $(document).ready(function() { $(document).on('mouseenter', '.hvr-grow', function() { //img->closest div->find tooltop $(this).closest(".kc-col-container").find("div#tooltop").show(); }).on('mouseleave', '.hvr-grow', function() { $(this).closest(".kc-col-container").find("div#tooltop").hide(); }); });

 img{ height:20px; width:20px; } #tooltop { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section id="icon-navigation" class="kc-elm kc-css-556112 kc_row"> <div class="kc-row-container kc-container navigation"> <div class="kc-wrap-columns"> <div class="kc-elm kc-css-671108 kc_col-sm-12 kc_column kc_col-sm-12"> <div class="kc-col-container"> <div class="kc-elm kc-css-405743 kc_row kc_row_inner"> <div id="icon1" class="kc-elm kc-css-400695 kc_col-sm-2 kc_column_inner kc_col-sm-2"> <div class="kc_wrapper kc-col-inner-container"> <div class="kc-elm kc-css-84984 kc_shortcode kc_single_image"> <a href="#" title="" target="_self"> <img src="http://shortcircuit.plexsitesprojects.com/wp-content/uploads/2020/06/Installation-Booking.png" class="hvr-grow" alt="" /> </a> </div> </div> </div> <div class="kc-elm kc-css-611650 kc_col-sm-2 kc_column_inner kc_col-sm-2"> <div class="kc_wrapper kc-col-inner-container"> <div class="kc-elm kc-css-953031 kc_shortcode kc_single_image"> <a href="#" title="" target="_self"> <img src="http://shortcircuit.plexsitesprojects.com/wp-content/uploads/2020/06/Renew-subscription.png" class="hvr-grow" alt="" /> </a> </div> </div> </div> <div class="kc-elm kc-css-970768 kc_col-sm-2 kc_column_inner kc_col-sm-2"> <div class="kc_wrapper kc-col-inner-container"> <div class="kc-elm kc-css-574150 kc_shortcode kc_single_image"> <a href="#" title="" target="_self"> <img src="http://shortcircuit.plexsitesprojects.com/wp-content/uploads/2020/06/Hotspot-Zone.png" class="hvr-grow" alt="" /> </a> </div> </div> </div> <div class="kc-elm kc-css-173984 kc_col-sm-2 kc_column_inner kc_col-sm-2"> <div class="kc_wrapper kc-col-inner-container"> <div class="kc-elm kc-css-893340 kc_shortcode kc_single_image"> <a href="#" title="" target="_self"> <img src="http://shortcircuit.plexsitesprojects.com/wp-content/uploads/2020/06/Security-Installation.png" class="hvr-grow" alt="" /> </a> </div> </div> </div> <div class="kc-elm kc-css-333215 kc_col-sm-2 kc_column_inner kc_col-sm-2"> <div class="kc_wrapper kc-col-inner-container"> <div class="kc-elm kc-css-901104 kc_shortcode kc_single_image"> <a href="#" title="" target="_self"> <img src="http://shortcircuit.plexsitesprojects.com/wp-content/uploads/2020/06/Internet-Time.png" class="hvr-grow" alt="" /> </a> </div> </div> </div> <div class="kc-elm kc-css-258048 kc_col-sm-2 kc_column_inner kc_col-sm-2"> <div class="kc_wrapper kc-col-inner-container" value="abc"> <div class="kc-elm kc-css-651959 kc_shortcode kc_single_image" value="abc"> <a href="#" title="" target="_self" value="abc"> <img src="http://shortcircuit.plexsitesprojects.com/wp-content/uploads/2020/06/Custom-Payments.png" class="hvr-grow" alt="" /> </a> </div> </div> </div> </div> <div id="tooltop" class="kc-elm kc-css-489664 kc_row kc_row_inner" > <div class="kc-elm kc-css-878424 kc_col-sm-12 kc_column_inner kc_col-sm-12"> <div class="kc_wrapper kc-col-inner-container"> <div class="kc-elm kc-css-800878 kc_text_block installation-booking-text"> <p> <span id="installation-popup" style="color: #fff;"><strong>Tooltip:</strong></span> <span id="installation-popup" style="color: #cccccc;"> Internet installation within 24 working hours. No telephone line required.</span></p> </div> </div> </div> </div> </div> </div> </div> </div>