gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 14:57:14 24 4
gpt4 key购买 nike

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

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

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

这是 codepenfullscreen

最佳答案

  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 !

关于css - 我可以只用 Css 实现吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16864967/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com