html – CSS转换 – 简化但不缓解？

概述我有一个关于我的图像的问题,如下所示( 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- 我有一个关于我的图像的问题,如下所示( 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" >

当鼠标悬停时,图像模糊,但当我将鼠标关闭时,它会直接恢复正常,如何使其轻松脱离模糊？

此外,当鼠标悬停在屏幕上时是否有方法显示文字？当用户将图像悬停在图像上时,我想让它模糊,然后显示一些文本,如“了解更多”.这也可能只是CSS吗？

干杯

解决方法 过渡属性添加到元素本身,而不是：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"  />

如果你徘徊开/关时需要不同的过渡性质,见this example.

>当元素悬停时,元素本身的Transition属性将发生.
>当悬停在元素上时,将会发生：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" >

如果您希望在悬停上添加文本,请查看以上任一答案.

> https://stackoverflow.com/a/18322705/2680216
> https://stackoverflow.com/a/21371665/2680216

总结

以上是内存溢出为你收集整理的html – CSS转换 – 简化但不缓解？全部内容，希望文章能够帮你解决html – CSS转换 – 简化但不缓解？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。