Question

我曾在网页教程的某处阅读过，我们只能在css中使用单个图像来悬停效果。对于Eg。我只需要在CSS中输入这个图像

因此，当Facebook图标没有悬停时，我们会看到暗淡的灰色图标，但当有人将鼠标悬停在图标上时，会显示蓝色图标，我只需要在CSS中使用一个图像文件。

我们如何做到这一点。另外，我想知道这些图像知道的是什么？

Answer 1

他们被称为sprites

它们允许您将一个图像用于多个元素，这看起来完全不同

我做了一个快速的例子来做你需要的here

<div></div>

div {
  background: url('http://i45.tinypic.com/2jee9zo.png');
  background-position: -10px -15px;
  height: 70px;
  width: 70px;
}

div:hover {
  background-position: -10px 83px;
}

Answer 2

您可以使用CSS精灵。这是一个有用的工具：http://es.spritegen.website-performance.org/

进一步阅读：http://www.w3schools.com/css/css_image_sprites.asp

Answer 3

编辑：它被称为spirte（抱歉添加了这个，因为我忘了你的第一个问题如何命名）

您可以通过定位背景图片来完成此操作，例如我下面的工作

这是CSS，顺便说一句

input#searchSubmit          { height: 34px; width: 36px; background: url('../images/searchSubmit.png') no-repeat; margin: 8px 8px 0 4px; cursor: pointer; border: none; }
input#searchSubmit:hover    { background-position: 0px -34px; }

如您所见，当我将鼠标悬停在searchSubmit上时，它会更改图像的背景位置，粘贴在按钮上，而不是带有红色搜索图标的黑色，带有白色搜索图标的红色。

网站就在这里，所以你可以看到它在行动，所有我的动作按钮都是这样做的顺便说一句。 click here for seeing this in action

使用单个图像悬停效果

3 个答案: