<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
我希望主页上的图像效果在鼠标移开和鼠标悬停时淡出。
我变了
all 1s ease; to: all 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;
}
我做错了什么？谢谢!
最佳答案
这是因为您在悬停选择器上使用了过渡属性。你应该像这样把它放在图像上:
#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:缓出过渡不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35258888/