Question

友好的堆叠，

任何人都知道如何在以下位置生成以下CSS悬停效果：

还有一些关于堆栈溢出的其他教程，用替换图像（一般彩色）翻转样式替换社交导航图标 - 我只是希望它反弹并保持图像相同。认为它可能与某些事情有关：

-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;

想法？谢谢！

Answer 1

你的问题的答案非常简单

当您将<li>悬停时，他们会应用负余量。这是条形码的html代码

<ul id="social" class="msixcol mlast mright">
    <li id="twitter" class="fade"><a href="http://twitter.com/seanwes/" class="r">twitter</a></li>
    <li id="facebook" class="fade"><a href="http://www.facebook.com/seanwes" class="r">facebook</a></li>
    <li id="dribbble" class="fade"><a href="http://dribbble.com/seanwes" class="r">dribbble</a></li>
    <li id="instagram" class="fade"><a href="http://instagram.com/seanwes" class="r">instagram</a></li>
</ul>

这就是做魔术的css线：

#social li:hover { margin-top: -3px; }

转换只是给出了平滑的效果：

a,.fade,input,textarea { -webkit-transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; }

Answer 2

嗨，这里有一些非常简单的基础代码：

CSS：

.image{
    width:200px;
    height:200px;
    background:red;
    margin:0 auto;
}

.transition{
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
}

.image:hover{
    box-shadow:0px 0px 15px 0px black;
}

HTML：

<div class="image transition"></div>

通过这种方式，您可以将转换作为类应用于您想要的任何元素，并记住转换应用于您编写的每个事物：hover。

here is a working Fiddle

以下是一些在列表中应用它的代码：

CSS：

ul{list-style:none; float:left;}
ul li{margin:15px;}
.image{
    width:200px;
    height:200px;
    background:red;
}

.transition{
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
}

.image:hover{
    box-shadow:0px 0px 15px 0px black;
}

HTML：

<ul>
    <li class="image transition"></li>
    <li class="image transition"></li>
    <li class="image transition"></li>
</ul>
<ul>
    <li class="image transition"></li>
    <li class="image transition"></li>
    <li class="image transition"></li>
</ul>

和Fiddle一如既往

现在您只需要将background:red;属性替换为
background-image:url(yourimagepath.ext);你应该准备好了。

如何在悬停/焦点上“反弹”社交导航图标？

2 个答案: