-1

そのため、Wordpress Web サイトで CSS 画像ホバー効果を使用していますが、これは Chrome では完全に正常に機能しますが、Firefox や Opera ではまったく機能しません (これらのブラウザーで画像をマウスオーバーしても何も起こりません)。

考えられる問題について読みましたが、それは div クラスと競合している可能性がありますか? わからない。

CSSは次のとおりです。

::-moz-selection {
    background-color: #888;
    color: #fff;
}

::selection {
    background-color: #888;
    color: #fff;
}

/*B&W*/
.bw {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.bw:hover {
    -webkit-filter: grayscale(100%);
}

.pic {
    float: left;
    margin: 20px;
    overflow: hidden;
}

HTMLは次のとおりです。 

<div class="bw pic"><a href="http://www.flickr.com/example"><img class="wp-image-998 alignnone" title="Example"alt="Example" src="http://www.flick.com/example.jpg" width="550" height="386" /></a></div>

例は単なるフィラーです。

Firefox および Opera ブラウザーでこれを修正および最適化する方法について何か提案はありますか?

4

2 に答える 2

0

まだ、Firefox での CSS フィルターのサポートはありません。ここを確認してください。

しかし、これを使用するFirefoxのグレースケールの回避策が1つあります

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");

JSFIDDLEで動作するデモを見ることができます。

于 2013-09-08T10:12:00.697 に答える
0

私はこれを自分で使用したことはありませんが、Firefox でサポートされていない webkit フィルターを使用しているという問題ではありません。簡単なグーグルを行ったところ、-moz-filter: grayscale(100%); が必要なようです。以下のリンクを参照してください。

http://pixelhunter.me/post/25782670606/css3-grayscale

以下の回答が古いブラウザとの互換性に優れているかどうかはわかりません。

于 2013-09-08T10:15:21.203 に答える