悬停单独的 div 时需要显示类

Question

我有一个 wordpress 网站，上面有一排类似图标的应用程序。当您将每个按钮悬停时，描述应出现在创建的区域下方。由于它们不在同一个 div 中，因此我需要使用 JavaScript 才能使其正常工作，但我已经尝试了所有方法，但没有任何效果。

我将这个添加到 css 中，该类是要隐藏的文本。

#installation-popup {
    display: none;
}

并尝试了多种 Java 方法来显示它，包括以下 3 种方法：

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();
    }); 
});

我该怎么做？

Answer 1

问题是您的选择器错误。使用document.getElementsByClassName 时，不应包含.。 getElementById 也是一样，你不应该包含 #。这段代码应该适合你：

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';
    });
}    

它遍历所有带有hvr-grow 类的图标，并为每个图标添加事件监听器。我在你的网站上试过了，效果很好。

Answer 2

您可以使用closest 查找与img 最接近的类，然后查找tooltop 以显示或隐藏。

演示代码：

$(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>