Question

我做了一件小事，我想用一个网站来展示每个团队。有3个社交图标，我绝对定位。布局还可以。我的问题是我想添加一些css效果，但我不确定css是否可以做到。

这是计划。 1.我想当用户将鼠标悬停在任何社交图标上时，它会稍微向上滑动。我知道如果图标位于相对位置，我只会添加过渡到它并使其悬停在顶部：-5px; 但由于它定位于绝对位置，因此无效。有没有解决这个问题？

我想要一种情况，当用户将鼠标悬停在任何图标上时，携带人类图片的大圆圈背景将变为悬停的特定图标的背景颜色。

以下是codepen和fullscreen

Answer 1

您可以在margin-bottom上使用.icon:hover。在定位图标时，这将累加到bottom。
我不知道您是否可以使用当前标记执行此操作。我不得不稍微重组一下：
- 在标记中 .pix之后移动了.icons 。
这样，您可以使用兄弟选择器.icon:hover ~ .pix在图标悬停时定位图片，或者在Facebook图标悬停时进一步将其指定为.fb:hover ~ .pix以定位图片。然后，只需更改background并选择添加一个漂亮的过渡，使颜色平滑淡出。

在这里，have a forked pen！

Answer 2

当然你可以这样做，因为你正在使用底部位置，而是转而使用。

.fb {
    background:#3b5998;
    position:absolute;
    z-index:1;
    left:110px;
    bottom:3px;
    transition: bottom 1s;
    -webkit-transition: bottom 1s;
}

.fb:hover{
    bottom:7px;
}

至于在其中一个图标悬停时更改主图像的背景颜色，我不确定你是否能够单独用CSS实现，当然不能用你当前的标记来实现。

Answer 3

您可以在悬停时添加底部边距，然后转换。

.icon{
    border-radius:100%;
    width:48px;
    height:48px;
    -webkit-transition: margin-bottom .5s;
            transition: margin-bottom .5s;
}
.icon:hover {
    margin-bottom: 10px;
}

我能用Css实现这个吗？

3 个答案: