我有一个关于我的图像的问题,如下所示(
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吗？
干杯
解决方法
过渡属性添加到元素本身,而不是：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.
>当元素悬停时,元素本身的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" class="img-blur">
如果您希望在悬停上添加文本,请查看以上任一答案.
> https://stackoverflow.com/a/18322705/2680216
> https://stackoverflow.com/a/21371665/2680216
