悬停时 CSS 过渡淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12992183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS transition fade on hover
提问by kwh71787
I've encountered a problem with CSStransitions. I'm designing a CSSgallery for my portfolio and I need my images to fade in on hover.
I've been playing around with this for over an hour and I was hoping someone could point me into the right direction.
我遇到了CSS转换问题。我正在CSS为我的投资组合设计一个画廊，我需要我的图像在悬停时淡入。我已经玩了一个多小时了，我希望有人能指出我正确的方向。
Here is a simplified version to it with JSFiddle
这是一个带有JSFiddle的简化版本
回答by giannis christofakis
I recommend you to use an unordered list for your image gallery.
我建议您为图片库使用无序列表。
You should use my code unless you want the image to gain instantly 50% opacity after you hover out. You will have a smoother transition.
您应该使用我的代码，除非您希望图像在悬停后立即获得 50% 的不透明度。您将有一个更平稳的过渡。
#photos li {
opacity: .5;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
#photos li:hover {
opacity: 1;
}
回答by Darwayne
This will do the trick
这将解决问题
.gallery-item
{
opacity:1;
}
.gallery-item:hover
{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
