Question

我有这些图标是我要在悬停时应用过滤器的图像。但是，它似乎没有起作用。

我的代码：

.icon {
   -webkit-transition: all 1s ease;
   transition:  all 1s ease;
}
.icon:hover {
   -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

Answer 1

应该注意filter在Internet Explorer或Firefox 35或更早版本上不起作用。如果您使用这些浏览器，它将无法正常工作。但是，如果您使用兼容的浏览器，正如您在此处所见，它将起作用。

img {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

img:hover {
  -webkit-filter: brightness(130%);
  filter: brightness(130%);
}

<img src="https://cr2014studyabroad.files.wordpress.com/2014/12/pineapple-2.png" width=200 height=200 />

有关此实验技术的更多信息，请访问这些链接

https://developer.mozilla.org/en-US/docs/Web/CSS/filter http://www.w3schools.com/cssref/css3_pr_filter.asp

CSS过渡不适用于我的过滤器：brightness（）？

1 个答案: