Question

我有一块灰色的社交图标。一旦盘旋，它们就会变成彩色版本。

我决定使用:hover伪类通过纯CSS制作它。但问题是它们只在悬停时开始加载，从而导致图像消失几秒钟。

是否有可能找到解决方案，例如，当用户位于页面底部时加载它们？

最诚挚的问候， Artem Ushakov

Answer 1

我建议你去拍一张精灵照。你不会让图像消失。

你可以在这里找到一个很好的解释：

http://css-tricks.com/css-sprites/

Answer 2

您可以使用CSS过滤器避免一起加载图像。

img {
  filter: gray; /* IE6+ */
  filter: grayscale(100%); /* Current draft standard */
  -webkit-filter: grayscale(100%); /* New WebKit */
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%); 
  -o-filter: grayscale(100%);
}

这是一个快速demo。

完全从https://stackoverflow.com/a/13640428/191226

中偷走了这个答案

悬停时更改图像的解决方案

2 个答案: