Question

我希望主页面上的图像效果在鼠标移出和鼠标悬停时淡出。

我改变了 all 1s ease;：所有1s ease-in-out;，但鼠标输出仍然没有消失，但它只是跳跃。

网站：http://wolf-photoart.witconsult.de/

以下是我当前CSS的一个示例：

#mainportraits img, #mainart img, #maincomics img { max-width: 56vw; }
#mainportraits img:hover, #mainart img:hover, #maincomics img:hover{
    -webkit-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
    -moz-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
    -o-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
    -ms-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
    filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#mainportraits:after{
    content: 'Portraits';
    z-index: 9999;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
} 

#mainportraits:hover:after{
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;   
    }

我做错了什么？谢谢！

Answer 1

这是因为您在悬停选择器上使用了transition属性。你应该把它放在图像上，如下所示：

#mainportraits img {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

CSS：缓解失效的过渡

1 个答案: