Question

我对我的图片有一个小问题，如此处所示（http://jsfiddle.net/garethweaver/Y4Buy/1/）。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

当鼠标悬停时图像会模糊，但是当我将鼠标移开时，它会直接恢复正常，我怎样才能让它在模糊之外缓和？

此外，还有一种方法可以在鼠标悬停时显示文字吗？当用户将鼠标悬停在图像上时，我希望它模糊，然后显示一些文字，例如＆＃34;了解更多＆＃34;。仅使用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

CSS过渡 - 缓解但不缓和？

1 个答案: