CSS:鼠标移出时过渡不透明？
CSS:鼠标移出时过渡不透明？
提问于 2012-05-13 00:43:32
.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;
}为什么这只会在我悬停时激活不透明度，而不会在我用鼠标离开对象时激活？
演示：https://jsfiddle.net/7uR8z/
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-05-13 00:57:16
您只将转换应用于: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;
}演示：https://jsfiddle.net/7uR8z/6/
如果不希望过渡影响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;
}Stack Overflow用户
发布于 2013-05-17 23:02:29
我设法找到了一个使用css/jQuery的解决方案。最初的问题:我不得不在动画时强制显示可见性，因为我有挂在区域之外的元素。这样一来，在动画制作过程中，大块文本现在也会挂在内容区域之外。
解决方案是从不透明度为0的主要文本元素开始，使用addClass注入并转换为不透明度为1，然后再次单击时使用removeClass。
我相信有一种完全jQquery的方法可以做到这一点。我不是做这件事的人。:)
所以在它最基本的形式中。
.slideDown().addClass("load");
.slideUp().removeClass("load");感谢大家的帮助。
Stack Overflow用户
发布于 2015-01-12 01:49:14
$(window).scroll(function() {
$('.logo_container, .slogan').css({
"opacity" : ".1",
"transition" : "opacity .8s ease-in-out"
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10565587
复制相关文章
相似问题