CSS:鼠标移出时的过渡不透明度?


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

为什么当我将鼠标悬停在鼠标上时,为什么只在不透明度上设置动画?

此处的演示:http : //jsfiddle.net/7uR8z/


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

不,对我不起作用!当我将鼠标悬停在红色框上时,过渡就起作用了!当用鼠标离开红色框时,它会“跳回”到完全不透明-我也希望它也能在鼠标移出时发出动画!
马特2012年

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

Answers:


202

您仅将过渡应用于: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状态关闭转换:

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


2

我设法找到了我喜欢的css / jQuery解决方案。最初的问题:我必须强制在显示动画时显示可见性,因为我有一些元素挂在该区域之外。这样一来,现在在动画制作过程中,大块文本现在也悬挂在内容区域之外。

解决方案是以0的不透明度开始主要文本元素,并用于addClass注入并过渡到1的不透明度。然后removeClass再次单击。

我敢肯定有一种全jQquery的方式来做到这一点。我不是那个人。:)

所以这是最基本的形式

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

感谢大家的帮助。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.