CSS: transition opacity on mouse-out?

.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: https://jsfiddle.net/7uR8z/

​

431915 次浏览
小开
最佳答案

您只将转换应用于 :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;
}

Demo: https://jsfiddle.net/7uR8z/3/

小开

我设法用 css/jQuery 找到了一个我喜欢的解决方案。最初的问题: 我必须强制可见性显示，而动画，因为我有元素挂在外面的区域。这样做，使大块的文本现在挂在外面的内容区域在动画以及。

解决方案是以不透明度为0开始主文本元素，并使用 addClass注入和过渡到不透明度为1。然后再次点击 removeClass。

我相信有一个全 jQquery 的方法可以做到这一点。我只是不适合这样做。 :)

所以最基本的形式是..。

.slideDown().addClass("load");
.slideUp().removeClass("load");

Thanks for the help everyone.

小开 
$(window).scroll(function() {
$('.logo_container, .slogan').css({
"opacity" : ".1",
"transition" : "opacity .8s ease-in-out"
});
});

检查小提琴: https://jsfiddle.net/2k3hfwo0/2/


提交答案