CSS悬停延迟（过滤器）

Posted 2023-05-08

【中文标题】CSS悬停延迟（过滤器）

【英文标题】：Css hover delay (filter)

【发布时间】：2015-12-12 01:36:55

【问题描述】：

我为页面上的图像使用灰度滤镜，并为悬停使用非常饱和的滤镜。

当图像悬停时，我希望 img 有 2-3 秒的延迟，直到它饱和。

我的代码是：

.image2
    max-width:70%;
    border-radius: 5px;

    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);

.image2:hover
    filter: saturate(500%),2s;
    -webkit-filter: saturate(500%);
    -moz-filter: saturate(500%);
    -o-filter: saturate(500%);
    -ms-filter: saturate(500%);

我尝试与transition-delay 和其他几个一起玩，但没有成功。

感谢您的回答:)

【问题讨论】：

看看这个问题：***.com/questions/8566090/delay-hover-in-css3。这可能会解决您的问题。

为了使transition-delay 工作，您需要为filter（和浏览器特定的等价物）定义transition（和浏览器特定的等价物），或者，就像我在答案中所做的那样，使用通用的all。

【参考方案1】：

你需要的是transition-delay:

.image2 
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    -webkit-transition-delay: 3s;
    transition-delay: 3s;

真的很简单：当一个元素的某个 CSS 属性发生变化时，在应用更改之前，浏览器会检查是否为该特定 CSS 属性设置了任何 transition。 如果有，浏览器将检查transition-delay。但是如果没有设置transition，就没有什么可以延迟的了，所以transition-delay是没用的。

在上面的示例中，过渡本身设置为 0.4 秒，它将在您悬停后 3 秒开始（但请注意，您需要将元素悬停 3 秒，否则过渡将被取消）。

我在经典 filter example 中添加了一个 3 秒的 transition-delay，以了解它的行为方式。

【讨论】：

非常感谢您的回答，但仍然不起作用。我可能做错了什么，但我尝试多次添加和更改值，但仍然没有。 mersi frumos de raspuns oricum :) o sa mai incerc sa vad ce reusesc :D

用它制作一个codepen或jsfiddle，我会看看。还有其他东西在干扰它。它应该工作。如您所见，在我的示例中确实如此。