Renkli bir simge (ve bir link olacak) ve kullanıcı simgesi üzerinde fare resmi renkli olur) yerlere kadar siyah-beyaz açmak için sabırsızlanıyorum.

Bu, IE ve Firefox desteklenen bir şekilde yapmak mümkün mü?

Bunu sağlamanın birçok yöntemi vardır:

1.) CSS-Sadece, sadece tek bir renkli görüntü kullanarak

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  */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

DemoveSource

2.) CSS-Sadece, Görüntüleri iki set kullanarak (Gri Renkli)

Görüntüyü tam renkli olarak iki nüsha, gri ve diğer gerekir, ve sonra CSS kullanarak, sadece hover stili renkli resim kullanmak için geçerli olabilir.

#yourimage { background: url(../YourBlackAndWhiteImage.png);}
#yourImage:hover { background: url(../YourColoredImage.png};}

Working Demo

bu da başarılı hover() jQuery yöntemi kullanıyor olabilir.

3.) Bu işlevi yerine getirmek için özel bir kütüphane kullanarak

desaturate kütüphane görüntüler, kolayca gri tonlama sürümü ve tam renkli bir sürüm arasında geçiş yapmak için izin yönetir.