1

到目前为止，我已经完成了我所做的事情：http: //jsfiddle.net/U5pQs/

我试图让悬停在蓝色框（#prompt）上做两件事：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）发生，我不明白为什么！

非常感谢任何帮助:)

4

2 回答 2

2

我找到的示例：http: //jsfiddle.net/KDtAX/487/具有悬停状态和关闭状态的过滤器，但是“#prompt:hover ~ #picbw”对我没有任何作用。当我将其更改为“#picbw:hover”并将其与我链接的示例相结合时，它起作用了。

1）您的 css 选择器不起作用：#prompt:hover ~ #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%)
}
于 2013-03-27T17:00:22.090 回答
1

我认为这个线程对 U.Image Greyscale 和 CSS 和鼠标悬停时重新着色很有用？ 读这个。 检查此链接。 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 中实现的过滤器（到目前为止）。

于 2013-03-27T16:56:06.973 回答