html - CSS Transition - 缓入但不缓出？

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