0

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

这是计划。1. 我希望当用户将鼠标悬停在任何社交图标上时，它会向上滑动一点。我知道如果图标是相对定位的，我只会向它添加过渡并使其悬停在顶部：-5px; 但是由于它是绝对定位的，所以它不起作用。有解决办法吗？

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

这是codepen和全屏

4

3 回答 3

1
  1. 您可以margin-bottom使用.icon:hover. bottom这将在定位图标时加起来。

  2. 我不知道您是否可以使用当前的标记来做到这一点。我不得不稍微重组它：

    • 在标记.pix 之后 移动。.icons
    • .icon将类移动到<a>链接，每个..pix.icon

    这样，您可以使用兄弟选择器.icon:hover ~ .pix在图标悬停时定位图片，或者进一步指定它以.fb:hover ~ .pix在 Facebook 图标悬停时定位图片。然后，只需更改background并选择性地添加一个漂亮的过渡，以便颜色平滑褪色。

来，有一支分叉的笔！

于 2013-05-31T20:18:34.077 回答
0

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

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

.fb:hover{
    bottom:7px;
}

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

于 2013-05-31T20:05:02.533 回答
0

您可以在悬停时添加底部边距，然后进行过渡。

.icon{
    border-radius:100%;
    width:48px;
    height:48px;
    -webkit-transition: margin-bottom .5s;
            transition: margin-bottom .5s;
}
.icon:hover {
    margin-bottom: 10px;
}
于 2013-05-31T20:06:31.433 回答