来自css的奇怪颜色污点

Posted 2023-02-22

【中文标题】来自css的奇怪颜色污点

【英文标题】：weird color stain from css

【发布时间】：2021-04-28 01:01:15

【问题描述】：

我已经在 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;

这是悬停的结果：

这是在将鼠标移开之后：

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

【问题讨论】：

您能否提供一个显示问题的最小工作 sn-p。

好的，我上传到code pen：codepen.io/marwantukhta/pen/QWKRomj

【参考方案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 像素。如果有人能解释这种现象就好了。

【讨论】：

你是对的，删除过渡确实解决了问题，但没有达到相同的效果，我认为你对像素映射绝对正确，似乎达到预期效果会导致 CSS 出现问题，所以我可能会使用 jquery 而不是感觉我正在使用引导程序，谢谢。

【参考方案2】：

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

【讨论】：

这个答案***.com/a/34529598/7659075 也可能有助于确定是否使用“显示”、“可见性”或“不透明度”

我添加了可见性，因为图标电影卡是可点击的，所以添加了可见性：隐藏处理了这一点，另一方面，不透明度存在，因为我想要一个平滑的过渡，但我无法做到这一点单独的可见性属性和不透明度是不够的，因为可点击的图标仍然存在并且可以点击。话虽如此，我删除了可见性属性只是为了对其进行测试，但问题仍然存在。

看到您的 codepen 后，我想知道缩放转换是否也引起了问题。我找到了这个答案，想知道它是否对你有帮助：***.com/questions/25799480/…

我试过 backface-visibility: hidden 和 -webkit-transform: translateZ(0) 都没有解决问题。