CSS过渡鼠标离开无法正常工作 [英] CSS transition mouse leave doesn't work properly

问题描述

我正在尝试缩放并降低图像的不透明度，当我使用光标进入img时，这确实很棒，但是当我离开img过渡不起作用时。

I am trying to scale and turn down opacity of image it really great work when I enter to the img with cursor but when I leave the img transition doen't work.

这是我的代码：

#hoverCon:hover img {
  transform: scale(1.2);
  opacity: 0.5;
  transition: all .28s ease-out;
}

推荐答案

您应该写

#hoverCon img {
  transform  : scale(1);   /* optional */
  opacity    : 1;          /* optional */
  transition : all .28s ease-out;
}

#hoverCon:hover img {
  transform  : scale(1.2);
  opacity    : 0.5;
}

定义基本属性（可选）并在正常状态下转换，然后仅更改属性在悬停

Define base properties (optionally) and transition on normal state, then only change properties on hover

示例中： http://codepen.io/anon/pen/JogVVW

这篇关于CSS过渡鼠标离开无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！