悬停导致图像消失答案

【问题标题】：Hover causes image to dissappear悬停导致图像消失
【发布时间】：2021-12-20 05:55:12
【问题描述】：

我正在做一个 React 和 Sass 教程，每当我将鼠标悬停在图像上时，滑块/轮播上的最后一张图像就会消失。

问题似乎源于position: absolutein &:hover。如果我删除它，只要我将鼠标悬停在图像上，就会出现最后一张图像。我需要包含这一行，以便悬停出现在正确的位置。

滑块的 .scss：

.list {
  width: 100%;
  margin-top: 10px;

  .listTitle {
    color: white;
    font-size: 20px;
    font-weight: 500;
    margin-left: 50px;
  }

  .wrapper {
    position: relative;
    .sliderArrow {
      width: 50px;
      height: 100%;
      background-color: rgb(22, 22, 22, 0.5);
      color: white;
      position: absolute;
      z-index: 99;
      top: 0;
      bottom: 0;
      margin: auto;
      cursor: pointer;

      &.left {
        left: 0;
      }

      &.right {
        right: 0;
      }
    }
    .container {
      margin-left: 50px;
      display: flex;
      margin-top: 10px;
      width: max-content;
      transform: translateX(0px);
      transition: all 1s ease;
    }
  }
}

滑块中各个项目的 .scss：

.listItem {
  width: 225px;
  height: 120px;
  background-color: var(--main-color);
  margin-right: 5px;
  cursor: pointer;
  color: white;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  &:hover{
    width: 325px;
    height: 300px;
    position: absolute;
    top: -150px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
    box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
    border-radius: 5px;

    img {
      height: 140px;
    }
  }
}

截图：

【问题讨论】：

标签： css reactjs sass

【解决方案1】：

我才意识到发生了什么。当我悬停时，悬停的项目从列表中取出，其余项目向内推，实际上并没有丢失。如果我为每个项目使用不同的图像，那会更明显。

【讨论】：

【解决方案2】：

尝试使用边距属性将图像设置到适当的位置，因为位置：Absolute 将移动图像以根据页面和顶部移动：150px 使图像移动到主图像下方（封面图像）

【讨论】：