javascript - 对齐悬停时出现的链接的问题

Question

我正在尝试设计一个 tumblr 主题。我在每个帖子的底部设置了一个带有四个按钮的 div。这些按钮之一是共享按钮。您将鼠标悬停在共享按钮上，然后会出现一个带有链接的 div(您单击并打开一个新窗口，并且帖子会在您选择共享的位置共享)。

在下面的示例中:当我用鼠标在图标上滚动时，它会向左对齐。

图片在这里:https://drive.google.com/file/d/0B1O3Ee_1Z5cRTDdaSTBQNW5mM0U/view?usp=sharing

此外，当我调整页面大小时，菜单最终处于完全不同的位置。

我希望菜单显示为这张图片中的样子。我希望菜单直接出现在按钮 div 的下方。我希望此菜单在调整页面大小时或移动视口(viewport)大小时保持在相同位置。 (这是我用照片编辑器制作的模型)我已经尝试对我的代码进行各种调整等，但无济于事。

图片在这里:https://drive.google.com/file/d/0B1O3Ee_1Z5cRX3hPd2ZGekJhU0U/view?usp=sharing

这是我的代码:

CSS:

.showme{ 
    display: none;
    width:100px;
    height:120px;
    text-align:right;
    margin-top:30px;
    z-index:5;
    position:absolute;
    float:right;  
}
.showhim:hover .showme{
    display : block;
    z-index:5;
}

HTML:

<div class="showhim"> 
    <li style="float:right; margin-left:5px; list-style-type:none; line-height:0px; padding-top:1px;">
        <i class="fa fa-share-square fa-lg"></i>
    </li>
    <div class="showme">
        <a href="https://twitter.com/intent/tweet?url={Permalink}" target="_blank">Twitter</a><br/>
        <a href="https://www.facebook.com/sharer/sharer.php?u={Permalink}" target="_blank">Facebook</a><br/>
        <a href="http://plus.google.com/share?url={Permalink}" target="_blank">Google Plus</a><br/>
        <a href="https://www.pinterest.com/pin/create/bookmarklet/" target="_blank">Pinterest</a><br/>
        <a href="mailto:?subject=&body={Permalink}" target="_blank">Email</a>
    </div>

我愿意接受任何尝试让它发挥作用的方法。我也没有问题将其设为 onClick 事件而不是悬停事件。我的猜测是 onClick 事件对于移动用户来说会更智能(我希望对此有一些意见)。

非常感谢任何帮助。

Answer 1

至少，您需要添加如下内容:

right: 0;

到 .showme 的 CSS。这将使 block 的右边界与包含 block 的右边界对齐。

请注意，包含 block 不一定是直接父级。您可能想要添加:

position: relative;

到您想要用作包含 block 的任何元素的 CSS(可能是 .showhim)。