css 如何在悬停状态下使用转换来移动元素？

2guxujil 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(112)

我是搞乱了变换，当我把它添加到一个悬停，它不工作。
我想做一个分享按钮，当你悬停它3按钮显示自己
转换工作正常，但当我使用它在伪选择器：悬停它不工作。

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 sucks">
  <img src="linked in.svg" alt="your browser sucks">
  <img src="telegram i.svg" alt="your browser sucks">
  <img src="share btn.svg" alt="your browser sucks">
</div>

css

来源：https://stackoverflow.com/questions/72931092/how-to-move-elements-in-hover-with-transform

1条答案

按热度按时间

7vux5j2d1#

如果将两个大小相同的position: absolute项堆叠在一起，则只能在z-index最大的项上触发:hover
如果你把你的翻译放在img的：hover上，你也会遇到用户体验的问题，而不是尝试把它 Package 在一个容器中（就像我在下面的div class=“share”中所做的那样）
试试这个CSS

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

      img {
        position: absolute;
        top: 0;
        left: 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;
      }

      .share {
        position: relative;
        height: 30px;
        width: 30px;
      }
      .share:hover {
        height: 120px;
      }
      .share:hover > img[src="share btn.svg"] {
        opacity: 0;
        transition: 600ms;
      }
      .share:hover > img[src="telegram i.svg"] {
        transform: translateY(30px);
      }
      .share:hover > img[src="linked in.svg"] {
        transform: translateY(60px);
      }
      .share:hover > img[src="instagram.svg"] {
        transform: translateY(90px);
      }

使用此HTML

<div>
      <div class="share">
        <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>
    </div>

赞(0）回复(0）举报 2023-03-05

我来回答

css 如何在悬停状态下使用转换来移动元素？

1条答案

相关问题

热门标签

最新问答