悬停

Question

我已经把与我到目前为止已经做了小提琴更改图像的灰阶特性： 1）换房子的图像（#picbw）是黑色和白色 2）在图像

这里显示一个div（#text）在它的文字是我对这个过渡代码：

#prompt:hover ~ #picbw {filter: grayscale(100%); 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
-ms-filter: grayscale(100%); 
      -o-filter: grayscale(100%);} 

2）作品，但我不能得到1）发生，我不明白为什么！

任何帮助，不胜感激:)

Answer 1

我认为这线程可以U. Image Greyscale with CSS & re-color on mouse-over? 阅读本是有用。 选中此链接。 http://webexplorar.com/creating-grayscale-images-with-css/ http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

阅读：

我们已经使用了各种黑客在过去的浏览器从黑白转换的图像色彩。一种技术要求将两个图像堆叠在一起。另一个选择是使用画布。或者...我们可以使用灰度滤镜。

img { 
    -webkit-filter: grayscale(100%); 
} 

当乘以一个百分比灰度功能，只是想给自己，“在0〜100％的比例，如何灰色我想这个形象是什么？

当与CSS3转换一起使用时，我们可以应用漂亮干净的悬停效果。

img { 
    -webkit-transition: -webkit-filter 1s; 
    } 
img:hover { 
    -webkit-filter: grayscale(100%); 
    } 

未来，您会希望为其他浏览器提供前缀，但此时并不需要。无需应用Mozilla转换来适应仅在Webkit中实现的过滤器（到目前为止）。

Answer 2

我发现的例子：http://jsfiddle.net/KDtAX/487/具有悬停状态和关闭状态的过滤器，但是“#prompt：hover〜#picbw”对我来说不会做任何事情。当我将其改为“#picbw：hover”并将其与我链接的示例结合使用时，它就起作用了。

1）你的CSS选择器不工作：#prompt：悬停〜#picbw
2）你的CSS不工作，从例如
*使用CSS，你需要所有的浏览器前缀css3

#picbw { 
    ... 
    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%); 
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ 
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */ 
} 
#picbw:hover { 
    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"); /* Firefox 10+ */ 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ 
    -moz-filter: grayscale(100%) 
}