css - 我可以只用 Css 实现吗？

Question

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

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

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

这是 codepen和 fullscreen

Answer 1

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

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

   • 已搬家 .pix 之后 .icons在标记中。
   • 移动了 .icon类到 <a>链接，所以.pix是每个 .icon 的兄弟 .

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

在这里，have a forked pen !