Question

我正在尝试获得类似于“分享此...”菜单here的内容，但我不太明白他们是如何做到这一点的，即使在查看他们的CSS之后。我指的是图像在悬停时出现。

我的第一次尝试就像是

<div id="share_on">
    <ul>
        <li><a href="#"><img src="shareon-digg.png" /></a></li>
        <li><a href="#"><img src="shareon-reddit.png" /></a></li>
        ...
        <li><a href="#"><img src="shareon-stumbleupon.png" /></a></li>
    </ul>
</div>

和CSS：

#share_on {overflow: hidden}
#share_on ul {margin-bottom: -16px}
#share_on li {display: inline}
#share_on li:hover {margin-top: -16px}

当然这不起作用，这就是我在这里问的原因。在非活动状态下，只显示一半图标，这是预期的行为。但是在悬停时，没有任何变化。我也试过一些变化，比如

#share_on li:hover {margin-bottom: 16px}

或

#share_on li:hover {padding-bottom: 16px}

但这些都不起作用。有什么想法吗？

Answer 1

实现类似效果的一种方法是使用以下css：

ul.social
    {
    width: 50%;
    margin: 1em auto;
    }

ul.social li
    {
    display: inline-block;
    overflow: hidden;
    position: relative;
    height: 31px;
    width: 34px;
    border-bottom: 1px solid #ccc;
    }

ul.social li img
    {
    position: relative;
    margin-top: 16px;
    -webkit-transition: margin-top 0.5s linear;
    }

ul.social li img:hover
    {
    margin-top: 0;
    -webkit-transition: margin-top 0.5s linear;
    }

和html：

<ul class="social">
<li><a href="#" title="digg"><img src="img/digg.png" /></a></li>
<li><a href="#" title="facebook"><img src="img/fb.png" /></a></li>
</ul>

演示页面：http://www.davidrhysthomas.co.uk/so/social.html

我正在使用的动画是-webkit-transition，当然，这仅限于在Webkit（Chrome和Safari）浏览器上工作。 Firefox获得了更改位置，但需要使用js / jQuery来平滑过渡。

值得注意的是，您链接到的网站使用了大型css-sprite（ http://angnetwork.com/ug/wp-content/plugins/sexybookmarks/images/sexy-sprite.png）来创建相同的效果，但

Answer 2

他们使用带背景的div，而不是imgs。 Dunno如果重要的话，我现在不想尝试它。

.button {
  position: fixed;
  z-index: 9999;
  background-image: url('whatever');
  margin-right: 0px;
  ...
}

.button:hover {
  margin-right: 1px;
}

像这样的东西可以做到这一点。至少在理论上。

Answer 3

根据我的理解，你在谈论动画圆角方形图标，对吧？如果不深入研究代码，我敢打赌这些都是使用jQuery完成的。因此，我建议你去寻找答案。

http://jquery.com/

Answer 4

我找到了解决方案。问题是<li>是一个内联元素。以下作品：

<div id="share_on">
    <div class="animated"><a href="#"><img src="shareon-digg.png" /></a></div>
    <div class="animated"><a href="#"><img src="shareon-reddit.png" /></a></div>
    ...
    <div class="animated"><a href="#"><img src="shareon-stumbleupon.png" /></a></div>
</div>

和CSS：

#share_on {overflow: hidden}
.animated {float: left; margin-right: 5px; margin-bottom: -16px}
.animated img:hover {margin-top: -16px; margin-bottom: 16px}

CSS动画菜单

4 个答案: