CSS：鼠标移出时的过渡不透明度？

Posted 2023-03-06

【中文标题】CSS：鼠标移出时的过渡不透明度？

【英文标题】：CSS: transition opacity on mouse-out?

【发布时间】：2012-05-20 21:21:42

【问题描述】：

.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/

​

【问题讨论】：

我使用的是 Safari，即使我用鼠标离开对象，它也能正常工作......有什么问题？

不，对我不起作用！当我悬停红色框时，过渡有效！当用鼠标离开红色框时，它会“跳”回完全不透明度 - 我希望它在鼠标移出时也能动画！

为什么不使用过滤器...caniuse.com/#search=filter

【参考方案1】：

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

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

【参考方案2】：

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

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

【参考方案3】：

我设法使用 css/jQuery 找到了一个我觉得很舒服的解决方案。最初的问题：我不得不在制作动画时强制显示可见性，因为我有元素悬挂在该区域之外。这样一来，大块文本现在也会在动画期间悬挂在内容区域之外。

解决方案是以不透明度 0 开始主要文本元素，然后使用 addClass 注入并转换为不透明度 1。然后再次单击时 removeClass。

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

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

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

感谢大家的帮助。