图像悬停颜色变化

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 精灵图像，然后在悬停时移动背景位置。

这是图片的链接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 http://css-tricks.com/css-sprites/ 撰写的一篇关于 CSS 精灵的好文章