html-如何使用transform在悬停中移动元素？

bug学弟 lv.1

发布时间：2022-07-12 21:56:47 199

相关标签： # css

我在处理transform，当我将它添加到悬停时，它不起作用。

transform工作正常，但当我在伪选择器中使用它时：悬停它不工作。

div {
  width: 400px;
  height: 400px;
  margin: 10px auto auto 100px;
  position: relative;
}

img {
  position: absolute;
  top: 0;
  width: 60px;
  height: 60px;
}

img[src="instagram.svg"] {
  z-index: 1;
}

img[src="linked in.svg"] {
  z-index: 2;
}

img[src="telegram i.svg"] {
  z-index: 3;
}

img[src="share btn.svg"] {
  z-index: 4;
  transition: 600ms;
}

img[src="share btn.svg"]:hover {
  opacity: 0;
  transition: 600ms;
}

img[src="telegram i.svg"]:hover {
  transform: translate(30px, 30px);
}

<div>

<img src="instagram.svg" alt="your browser is suck">

<img src="linked in.svg" alt="your browser is suck">

<img src="telegram i.svg" alt="your browser is suck">

<img src="share btn.svg" alt="your browser is suck">

</div>

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。