css添加hover让绝对定位元素过渡显现出来

最新推荐文章于 2024-04-09 19:48:01 发布

Michael_Cheng_09

最新推荐文章于 2024-04-09 19:48:01 发布

阅读量277

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/zihang_cheng/article/details/130376556

版权

.each_wrap {
  position: relative;
  transition: all 500ms ease;
  .active {
    background: #edf2fe;
  }
  .each_item {
    position: relative;
    height: 58px;
    padding-right: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    cursor: pointer;
  }
  .delIcon {
    display: none;
  }
  &:hover {
    background: #edf2fe;
    .delIcon {
      animation: hideIndex 0.3s;
      position: absolute;
      top: 20px;
      right: 12px;
      width: 14px;
      display: block;
      cursor: pointer;
    }
  }
}

@keyframes hideIndex {
  0% {
    opacity: 0;
    transform: translate(800px, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

            <div className={css.each_wrap}>
              <div
                className={`${css.each_item} ${index == catIdx ? css.active : null}`}
              >
                <div>{title}</div>
                <div>章节号：{chapterNo}</div>
              </div>
              <img
                src={DelIcon}
                onClick={() => delModalRef.current.openHandle(el)}
                className={css.delIcon}
              />
            </div>

利用animation使删除图标过度显现