CSS 过渡 - 缓入但不缓出？

Question

我的图片有一点小问题，如下所示 (http://jsfiddle.net/garethweaver/Y4Buy/1/)。

.img-blur:hover {
  -webkit-filter: blur(4px);
  transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
}

<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur">

鼠标悬停时图像模糊，但当我将鼠标移开时，它会直接恢复正常，我怎样才能使其摆脱模糊？

另外，有没有办法在鼠标悬停时显示文本？当用户将鼠标悬停在图像上时，我希望它模糊，然后显示一些文本，例如“了解更多”。仅使用 css 也可以做到这一点吗？

干杯

Answer 1

将过渡属性添加到元素本身而不是 :hover 伪类版本。

这样做时，将在悬停和关闭时进行过渡。

Updated Example

.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur" />

---

如果您在悬停时想要不同的过渡属性，请参阅this example。

• 当悬停在元素关闭时，元素本身的过渡属性将发生。

• :hover 伪类上的转换将在将鼠标悬停在 元素上时发生：

.img-blur {
    transition: all 0.35s ease-in-out;   /* Hover off */
}
.img-blur:hover {
    -moz-filter: blur(4px);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    transition: all 1s ease-in;         /* On hover */
}

<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur">

---

如果您希望在悬停时添加文本，请查看这些过去的答案。

• https://stackoverflow.com/a/18322705/2680216

• https://stackoverflow.com/a/21371665/2680216