我对我的图片有一个小问题，如此处所示（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">
当鼠标悬停时图像会模糊，但是当我将鼠标移开时，它会直接恢复正常，我怎样才能让它在模糊之外缓和？
此外，还有一种方法可以在鼠标悬停时显示文字吗？当用户将鼠标悬停在图像上时，我希望它模糊，然后显示一些文字，例如＆＃34;了解更多＆＃34;。仅使用css也可以吗？
干杯
答案 0 :(得分：32)
将过渡属性添加到元素本身而不是:hover伪类版本。
这样做时，将鼠标悬停在 和 上时会发生转换。
.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">
如果您想在悬停时添加文字，请查看以上任何一种答案。