html - 图像悬停颜色变化

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 sprites 的好文章 http://css-tricks.com/css-sprites/