Need class to appear when hovering a seperate div

user_13732748 0
Viewed 99

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?

hover jquery javascript
2 Answers

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.

user_123983360

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>

user_106064000
Related