CSS：鼠标移开时的过渡不透明度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10565587/
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 opacity on mouse-out?
提问by matt
.item:hover {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
}
Why does this only animate the opacity when I hover-in but not when I leave the object with the mouse?
为什么这只会在我悬停时为不透明度设置动画，而在我用鼠标离开对象时不会设置动画？
Demo here: http://jsfiddle.net/7uR8z/
演示在这里：http: //jsfiddle.net/7uR8z/
?
?
回答by Sampson
You're applying transitions only to the :hoverpseudo-class, and not to the element itself.
您仅将转换应用于:hover伪类，而不是元素本身。
.item {
height:200px;
width:200px;
background:red;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.item:hover {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
Demo: http://jsfiddle.net/7uR8z/6/
演示：http: //jsfiddle.net/7uR8z/6/
If you don't want the transition to affect the mouse-overevent, but only mouse-out, you can turn transitions off for the :hoverstate :
如果您不希望转换影响mouse-over事件，而只是mouse-out，您可以关闭:hover状态的转换：
.item:hover {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
回答by Sektion66
I managed to find a solution using css/jQuery that I'm comfortable with. The original issue: I had to force the visibility to be shown while animating as I have elements hanging outside the area. Doing so, made large blocks of text now hang outside the content area during animation as well.
我设法使用我熟悉的 css/jQuery 找到了一个解决方案。最初的问题：我不得不在动画时强制显示可见性，因为我有元素挂在区域外。这样做，使大块文本现在也在动画期间悬挂在内容区域之外。
The solution was to start the main text elements with an opacity of 0 and use addClassto inject and transition to an opacity of 1. Then removeClasswhen clicked on again.
解决方案是使用不透明度为 0 的主要文本元素开始addClass注入并转换为不透明度为 1。然后removeClass再次单击时。
I'm sure there's an all jQquery way to do this. I'm just not the guy to do it. :)
我确定有一种全 jQquery 方法可以做到这一点。我只是不适合做这件事。:)
So in it's most basic form...
所以在它最基本的形式...
.slideDown().addClass("load");
.slideUp().removeClass("load");
Thanks for the help everyone.
谢谢大家的帮助。
回答by Peter Darmis
$(window).scroll(function() {
$('.logo_container, .slogan').css({
"opacity" : ".1",
"transition" : "opacity .8s ease-in-out"
});
});
Check the fiddle: http://jsfiddle.net/2k3hfwo0/2/
检查小提琴：http: //jsfiddle.net/2k3hfwo0/2/
