CSS：在鼠标移出时转换不透明度？

.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; } 

为什么只有当我hover时才会使不透明度变成animation，而不是当我用鼠标离开物体时？

在这里演示： http : //jsfiddle.net/7uR8z/

Answer 1

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

演示： http : //jsfiddle.net/7uR8z/6/

如果您不希望转换影响mouse-over事件，而只是mouse-out :hover ，则可以closures: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; } 

演示： http : //jsfiddle.net/7uR8z/3/

Answer 2

顺便说一句，我在FIREFOX中一直苦苦挣扎着，直到我意识到你在单词opacity中有一个错字：

 -moz-transition: opactiy .15s ease-in-out; 

需要是

 -moz-transition: opacity .15s ease-in-out; 

Answer 3

我设法find一个解决scheme使用CSS / jQuery，我很舒服。 最初的问题：我不得不强制显示animation，因为我有悬挂在该地区以外的元素的可见性。 这样做，在animation过程中，现在使大块文本悬挂在内容区域之外。

解决scheme是启动不透明度为0的主文本元素，并使用addClass注入并转换为不透明度为1的removeClass 。然后在再次单击时removeClass 。

我确定有一个所有的jQquery方法来做到这一点。 我只是不是做这件事的人。 🙂

所以这是最基本的forms

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

感谢大家的帮助。

Answer 4

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

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