图像悬停颜色变化

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