2

私は自分のサイトのリンクとしていくつかの画像を使用しています。画像の 1 つにマウスを合わせると、灰色から色に変わり、マウスを離すと灰色に戻ります。

アクティブ化されたときに画像に色を付けたままにしたい。画像をクリックすると、別のリンクがクリック/アクティブ化されるまで色付けされたままになります。

これは私のコードです:

HTML:

<p><a href="privileged.php" target="testframe">
<img class="grayscale" height="67" src="powerlogo.png" width="303">
</a></p>
<iframe name="testframe"></iframe>

CSS:

img.grayscale {
  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 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

a:hover img, a:focus img {
    filter: none;
    -webkit-filter: grayscale(0%);
}

上記は Firefox では意図したとおりに機能しますが、Chrome と IE では機能しません。

私は何を間違っていますか？

4

1 に答える 1

6

javascript を使用してクラスを要素に追加/切り替え、css でスタイルを設定できます。

$("a").click(function(){
  $("a").removeClass("active");
  $(this).addClass("active");
});

a:hover img,
a:focus img,
a.active img {
  filter: none;
}

http://fiddle.jshell.net/3uYDc/

于 2013-06-02T14:16:07.857 に答える