圖像懸停顏色變化

Question

我對HTML和CSS還是很陌生，對於我的網站，我正在嘗試制作這種東西。 http://www.gontroller.com/

不用說，結果不是很好...這是我到目前為止的內容： http : //www.cityworksmc.com/possibleindex.html

如果有人能帶領我做出正確的決定，我將不勝感激。 我還嘗試了在互聯網上找到的其他一些代碼，不用說，它們工作得不太好。 這是其中之一。

img.books {
  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.books:hover {
  filter: none;
  -webkit-filter: grayscale(0%);

我也看了看他們的一些源代碼，它有點離我遠了，哈哈。

先感謝您。

Answer 1

他們為每個鏈接背景使用CSS Sprite圖片，然后在懸停時移動背景位置。

這是圖像的鏈接http://www.gontroller.com/img/gforums.png

然后css就是這樣

#forums a {
  background: url(http://www.gontroller.com/img/gforums.png) no-repeat;
  background-position:center top;
  height:239px;
  width:222px;
}

然后在懸停時，他們正在移動背景位置

#forums a:hover {
  background-position: center bottom;
}

這是克里斯·科耶爾（Chris Coyier）撰寫的關於CSS精靈的好文章， 網址為http://css-tricks.com/css-sprites/