悬停导致图像消失

Question

我正在做 React 和 Sass 教程，当我将鼠标悬停在图像上时，slider/carousel 上的最后一张图像就会消失。

问题似乎源于 position: absolute 在 &: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;
    }
  }
}

截图：

Answer 1

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

Answer 2

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

悬停导致图像消失

Hover causes image to dissappear

css

sass

reactjs