来自css的奇怪颜色污渍 [英] weird color stain from css

问题描述

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

这是 css 代码，其中电影卡片是详细信息，电影是要悬停的 div

.movi​​e-card{过渡:500 毫秒缓入缓出；背景颜色:#a851ff；不透明度:0；可见性:隐藏；边框:1px 实心 #a851ff;}.movi​​e-box-content:hover .movi​​e-card{转换延迟:250ms；转换持续时间:500ms；可见性:可见；不透明度:1；}

这是悬停的结果:

这是在将鼠标移开之后:

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

解决方案

从电影卡类中移除 transition: 500ms 缓入淡出; 摆脱了虚假的阴影".

 .movi​​e-box {位置:相对；显示:块；宽度:300px；高度:168.75px；}.movi​​e-box-content {变换:比例(1)；过渡:500 毫秒缓入缓出；背景图片:url('https://wallpaperaccess.com/full/1508305.jpg');背景重复:不重复；背景尺寸:300px 168.75px；宽度:100%；高度:100%；rborder-半径:2%；}.movi​​e-box-content:悬停{转换延迟:250ms；转换持续时间:500ms；变换:比例(1.3)；边框:1px 实心 #a851ff;框阴影:#a851ff；}.电影卡{/* 过渡:500 毫秒缓入缓出；*/背景颜色:#a851ff；不透明度:0；可见性:隐藏；}.movi​​e-box-content:hover .movi​​e-card {转换延迟:250ms；转换持续时间:500ms；可见性:可见；不透明度:1；}

<div class="movie-box-content"><div style="width: 100%; height: 100%;"></div><div class="隐藏电影卡"><div class="text-center"><strong>戏剧、心理、犯罪</strong>

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

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

I've coded it in css where if you hover over a div it expands and show more details about the div, the issue is that whenever I remove the mouse some of the color is still left as lines, I'll attach a picture.

This is the css code where movie card is the details and movie is the div to hover on

.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;
}

This is the result of hovering over:

And this is after removing the mouse over it:

its worth noting that after I scroll once, all the lines get removed.

解决方案

Removing the transition: 500ms ease-in-out; from the movie-card class gets rid of the spurious 'shadows'.

  .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>

There is the question of whether this alters anything else visually.

Incidentally, changing scale(1.2) to scale(i) where i is an integer also seemed to remove the problem which perhaps indicates difficulty with mapping CSS pixels (which can take up several display pixels each) so that as the div scales down it 'leaves behind' parts of the CSS pixel. It would be good if someone could explain this phenomenon.

这篇关于来自css的奇怪颜色污渍的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！