如何使它在您滚动按钮时出现菜单

Question

在我的帖子下方的阅读更多链接旁边的首页上，我想添加一个社交分享菜单。但是，我只希望在用户将鼠标悬停在共享按钮上时显示共享菜单。类似于下面的图片。我添加了所有菜单链接和初始共享按钮。但是，当您将鼠标悬停在按钮上时，我无法弄清楚如何使菜单出现。有没有人有任何解决方案？这是一个小提琴 - https://jsfiddle.net/wow3820z/

分享按钮

悬停时分享按钮（显示社交分享菜单）

我的社交分享 html

<div class="share-buttons">

<a href="http://twitter.com/home/?status=Love this post by @ <?php the_title(); ?> - <?php the_permalink(); ?>" target="_blank" title="Tweet this!"><img src="https://www.theclimategroup.org/sites/all/modules/custom/tcg_social_media_icons/icons/black/16x16/twitter.png"></a>
   
<a href="http://www.facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank">
        <img src="http://www.shipwreckmuseum.com/wp-content/themes/shipwreckmuseum/assets/facebook-icon.png" alt="Facebook" />
    </a>
    
 <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
        <img src="https://lh4.googleusercontent.com/-FaD4j4FL1Bc/TuEf9aN1gEI/AAAAAAAABek/kVqztZRwJ1w/s128/Pinterest_Favicon.png" alt="Pinterest" />
    </a>
    
    <a href="http://www.facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank">
        <img src="http://www.ihatestevensinger.com/osafe_theme/images/user_content/images/icon-heart.png" alt="Heart" />
    </a>

</div>

Answer 1

将它们包装在容器/包装器中，隐藏共享按钮，当您将鼠标悬停在包装器上时，显示共享按钮。

.wrap:hover .share-buttons {
  display: block;
}
.share-buttons {
  display: none;
}

<div class="wrap">

  <img class="main-share button" src="http://amandoblogs.com/wp-content/uploads/2014/08/share-e1408475480528.png" />

  <div class="share-buttons">

    <a href="http://twitter.com/home/?status=Love this post by @ <?php the_title(); ?> - <?php the_permalink(); ?>" target="_blank" title="Tweet this!"><img src="https://www.theclimategroup.org/sites/all/modules/custom/tcg_social_media_icons/icons/black/16x16/twitter.png"></a>

    <a href="http://www.facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank">
      <img src="http://www.shipwreckmuseum.com/wp-content/themes/shipwreckmuseum/assets/facebook-icon.png" alt="Facebook" />
    </a>

    <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
      <img src="https://lh4.googleusercontent.com/-FaD4j4FL1Bc/TuEf9aN1gEI/AAAAAAAABek/kVqztZRwJ1w/s128/Pinterest_Favicon.png" alt="Pinterest" />
    </a>

    <a href="http://www.facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank">
      <img src="http://www.ihatestevensinger.com/osafe_theme/images/user_content/images/icon-heart.png" alt="Heart" />
    </a>

  </div>
</div>

Answer 2

我编辑了你的小提琴。

关于html

<div class="share-buttons" id='sharebuttons' style='display:none'>

<a id="twitter" href="http://twitter.com/home/?status=Love this post by @ <?php the_title(); ?> - <?php the_permalink(); ?>" target="_blank" title="Tweet this!"><img src="https://www.theclimategroup.org/sites/all/modules/custom/tcg_social_media_icons/icons/black/16x16/twitter.png"></a>

<a href="http://www.facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank">
        <img src="http://www.shipwreckmuseum.com/wp-content/themes/shipwreckmuseum/assets/facebook-icon.png" alt="Facebook" />
    </a>

 <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
        <img src="https://lh4.googleusercontent.com/-FaD4j4FL1Bc/TuEf9aN1gEI/AAAAAAAABek/kVqztZRwJ1w/s128/Pinterest_Favicon.png" alt="Pinterest" />
    </a>

    <a id='heart' href="http://www.facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank">
        <img src="http://www.ihatestevensinger.com/osafe_theme/images/user_content/images/icon-heart.png" alt="Heart" />
    </a>

</div>

使用原生 javascript

var mainsharebutton = document.getElementById('mainsharebutton');

mainsharebutton.addEventListener('mouseover', showMenu);
mainsharebutton.addEventListener('mouseleave', hideMenu);

function showMenu(){
        var myMenu = document.getElementById('sharebuttons');
    myMenu.style.display = 'block';
}

function hideMenu(){
        var myMenu = document.getElementById('sharebuttons');
    myMenu.style.display = 'none';
}

基本上只是在您的分享按钮上添加鼠标事件 onmouseover 和 onmouseleave，然后我根据触发的事件显示或取消显示按钮 div