如何在悬停菜单下对齐对象

Question

在我的帖子中，我有一个阅读更多按钮以及几个按钮。我的最后一个按钮是社交分享按钮，当您将鼠标悬停在其上时，会在其下方显示社交分享菜单。问题是按钮全部按照我想要的方式对齐，但是当您将鼠标悬停在共享按钮上时，共享按钮会向上移动，社交共享菜单会显示与其他按钮对齐。如何才能使社交分享菜单显示在所有按钮下方，我的分享按钮始终与其他按钮保持对齐？提前致谢。这是一个小提琴 - https://jsfiddle.net/5mgoktLs/2/

*我还希望共享菜单位于共享按钮下的中心

悬停前的按钮......

当您将鼠标悬停在共享按钮上时...（我希望共享按钮始终与其他按钮保持对齐）

HTML

    <img class="abother-reply" src="http://amandoblogs.com/wp-content/uploads/2014/08/share-e1408475480528.png" />
  <img class="reply" src="http://amandoblogs.com/wp-content/uploads/2014/08/share-e1408475480528.png" />
<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>

CSS

.wrap:hover .share-buttons {
  display:block;
}
.share-buttons {
  display: none;
    letter-spacing: 5px;
}
.wrap {
    display: inline-block;
}
.reply {
    display: inline-block;
}
.another-reply {
    display: inline-block;
}

Answer 1

这为我解决了这个问题：

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

已更新：如果您希望它居中，这有点hacky但它​​确实有效！

.wrap:hover .share-buttons {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, 30%);
 white-space: nowrap;
}

.wrap {
 position: relative;
 display: inline-block;
}

Answer 2

尝试将您的css更改为：

.wrap:hover .share-buttons  {
  display: inline-block;
  position: absolute;
}