1

これは小さな質問です。www.thumbtack.com/jobs にアクセスして、以下のスポンサーにアクセスしてください。最初はスポンサーの名前に色が見えませんが、カーソルを合わせると色が表示されることがわかります。誰かがこれを行う方法を教えてもらえますか。Googleで何を検索すればよいかよくわかりません（どのキーワードを使用するかなど）。inspect 要素を使用しようとしましたが、それがどのように行われているのかわかりませんでした。どんな助けでも大歓迎です。

4

2 に答える 2

10

CSS でこれを行うための最も広く互換性のある方法は、個別の画像を使用することです。1 組のグレースケール画像と 1 組のフルカラー画像を使用し、これらを CSS:hover疑似クラス (通常はbackground-imageプロパティを使用) で切り替えます。

.sponsor {
    background-image: url('gray.png');
}

.sponsor:hover {
    background-image: url('color.png');
}

必要に応じて、グレースケール バージョンとカラー バージョンの両方を 1 つの画像に配置し、それを画像上の「ウィンドウ」のように移動させることで、1 つの画像でこれを実現できます (CSS スプライトとして知られている手法で、ジョン P)。たとえば、ロゴが 200x100 の場合、上がグレー、下がカラーの 200x200 画像を作成し、次のようにします。

.sponsor {
    width: 200px;
    height: 100px;
    background-image: url('logos.png');
    background-position: 0px 0px;
}

.sponsor:hover {
    background-position: 0px -100px;
}

画像ベースのソリューションの中で、Jon が指摘したように、ページの読み込み時間が短縮され、初めて画像にマウスオーバーしたときの遅延も防止されるため、これが望ましいです。さらに、HTTP 要求が 1 つ少なくなるため、待ち時間の長い接続 (携帯電話のデータ接続など) で重要な違いが生じる可能性があります。

ただし、比較的新しいブラウザーをターゲットにしている場合は、CSS フィルターを使用できる場合があります。

.sponsor {
    filter: grayscale(1.0);
}

.sponsor:hover {
    filter: none;
}

残念ながら、これは現在、Safari、Chrome、Opera の新しいバージョン、およびその他の WebKit ベースのブラウザーでのみ機能します。現在はプレフィックス付きのプロパティでもあるため、代わりに として使用する必要があります-webkit-filter。

于 2013-10-09T03:23:21.023 に答える
0

CSS3でそれを行うことができます：

.object {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(grayscale.svg);
 /* Firefox 4+ */
    filter: gray;
 /* IE 6-9 */;
}

.object:hover {
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    filter: none;
    filter: none;
    filter: none;
}

background: url()または、同じ方法でホバー時に使用および変更できます。

于 2013-10-09T03:28:45.737 に答える