html - 悬停时返回颜色

Question

在这里，我创建了 3 张从彩色到灰度的图像，我想在悬停时显示颜色我做错了什么？

这是小提琴链接：

http://jsfiddle.net/4tHWg/6/

CSS 代码：

 .box {
       float: left;
       position: relative;
       width: 14.285714286%;
 }
  
 .boxInner img {
       width: 100%;
       display: block;
 }

 .boxInner img:hover {
      -webkit-filter: grayscale(0%);
 }

 @-webkit-keyframes toGrayScale {
    to { -webkit-filter: grayscale(100%);  }
 }

 .box:nth-child(1) img {
    -webkit-animation: toGrayScale 1s 0.5s forwards;
 }

.box:nth-child(2) img {
    -webkit-animation: toGrayScale 2s 1s forwards;
}

.box:nth-child(3) img {
    -webkit-animation: toGrayScale 3s 1.5s forwards;
}

Answer 1

还有另一个简单的解决方案。

.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);}

.grayscale:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);}

Answer 2

首先，您必须为非灰度创建另一个 webkit 动画。

@-webkit-keyframes offGrayScale {
to {
    -webkit-filter: grayscale(0%);
  }
}

比您创建悬停（对于每个 img）

.box:nth-child(1) img:hover {
-webkit-animation: offGrayScale 1s 0.5s forwards;}
.box:nth-child(2) img:hover {
-webkit-animation: offGrayScale 1s 0.5s forwards;}
.box:nth-child(3) img:hover {
-webkit-animation: offGrayScale 1s 0.5s forwards;}

http://jsfiddle.net/valentinzaraf/Ggqy6/