1

これまでに行ったことをフィドルにまとめました: http://jsfiddle.net/U5pQs/

青いボックス (#prompt) にカーソルを合わせると、2 つのことを実行できるようにしようとしています。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 を使用し
てください

#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 に役立つと思います 。CSS を使用した画像のグレースケールとマウスオーバーでの色の変更はありますか? これを読む。 このリンク先を確認してください。 http://webexplorar.com/creating-grayscale-images-with-css/ http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

これを読む：

過去にさまざまなハックを使用して、ブラウザーで画像を白黒からカラーに切り替えました。1 つの手法では、2 つの画像を重ね合わせる必要があります。別のオプションは、キャンバスを使用することです。または… グレースケール フィルターを使用することもできます。

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

グレースケール関数にパーセンテージを適用するときは、次のように考えてみてください。

CSS3 トランジションと組み合わせて使用​​すると、美しくクリーンなホバー効果を適用できます。

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

将来的には、他のブラウザーにプレフィックスを提供する必要がありますが、現時点では必要ありません。(これまでのところ) Webkit にのみ実装されているフィルターに対応するために Mozilla トランジションを適用する必要はありません。

于 2013-03-27T16:56:06.973 に答える