来自css的奇怪颜色污点

Question

我已经在 CSS 中对其进行了编码，如果您将鼠标悬停在一个 div 上，它会展开并显示有关该 div 的更多详细信息，问题是每当我移开鼠标时，某些颜色仍会保留为线条，我会附上一张照片。

这是css代码，其中movie card是详细信息，movie是要悬停的div

.movie-card{
  transition: 500ms ease-in-out;
  background-color: #a851ff;
  opacity: 0;
  visibility: hidden;
  border: 1px solid #a851ff;
}

.movie-box-content:hover .movie-card{
  transition-delay: 250ms;
  transition-duration: 500ms;
  visibility: visible;
  opacity: 1;
}

这是悬停的结果：

这是在将鼠标移开之后：

值得注意的是，在我滚动一次之后，所有的行都会被删除。

Answer 1

从电影卡类中删除 transition: 500ms ease-in-out; 可以消除虚假的“阴影”。

  .movie-box {
    position: relative;
    display: block;
    width: 300px;
    height: 168.75px;
    
  }

  .movie-box-content {
    transform: scale(1);
    transition: 500ms ease-in-out;
    background-image: url('https://wallpaperaccess.com/full/1508305.jpg');
    background-repeat: no-repeat;
    background-size: 300px 168.75px;
    width: 100%;
    height: 100%;
    rborder-radius: 2%;
  }

  .movie-box-content:hover {
    transition-delay: 250ms;
    transition-duration: 500ms;
    transform: scale(1.3);
    border: 1px solid #a851ff;
    box-shadow: #a851ff;

  }

  .movie-card {
    /* transition: 500ms ease-in-out;*/
    background-color: #a851ff;
    opacity: 0;
    visibility: hidden;
    
  }

  .movie-box-content:hover .movie-card {
    transition-delay: 250ms;
    transition-duration: 500ms;
    visibility: visible;
    opacity: 1;
    
  }

<div class="movie-box">
  <div class="movie-box-content">

    <div style="width: 100%; height: 100%;"></div>

    <div class="movie-card hidden">

      <div class="text-center">
        <strong>Drama, psycho, crime</strong>
      </div>
    </div>
  </div>

</div>

问题在于这是否会在视觉上改变其他任何东西。

顺便说一句，将 scale(1.2) 更改为 scale(i) 其中 i 是一个整数似乎也消除了可能表明映射 CSS 像素（每个可能占用多个显示像素）的问题，以便 div 缩放向下它“留下”部分 CSS 像素。如果有人能解释这种现象就好了。

Answer 2

我认为没有必要同时更改可见性和不透明度，因为它们本质上实现了相同的目标。由于您在班级上设置了一般转换，因此这两者可能会相互干扰。