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

发布时间：2020-12-14 18:50:53 所属栏目：资源来源：网络整理

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

我有一个关于我的图像的问题,如下所示( 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伪类的版本.

在此过程中,过渡会徘徊和关闭时发生.

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.

>当元素悬停时,元素本身的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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!