将图像淡入另一个图像（在精灵内）

使用 CSS 创建图像悬停效果非常容易。给元素设置一个背景图片，然后在它的 :hover 状态下，更改 background-image。最佳实践是将两个图像合并成一个图像，并更改 background-position 而不是使用两个单独的图像，这就是 CSS 精灵 的概念。但如果想要淡入一个图像到另一个图像，而不是突然切换，该怎么做呢？

解决方案是在原始元素的顶部创建一个额外的元素，该元素的 opacity 为 0，并且 background-position 已经移到了指定位置。然后在 :hover 状态下，将不透明度淡入。以下三种方法使用一个小箭头图形来实现这一点。

（箭头来自 Ask Differently）

查看演示

方法一：合理的渐进性

在原始元素内部添加一个 span 元素。该 span 元素本质上是悬停状态。我知道，额外的标记很糟糕，但我们需要一个额外的元素来使用，并且伪元素在大多数浏览器中无法进行过渡。

<a href="#" class="arrow">Arrow<span></span></a>

箭头本身将使用基本的 CSS 图像替换，并且背景定位在默认位置。

.arrow {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 36px;
	height: 36px;
	background: url(sprites.png) no-repeat;
}

那里使用的相对定位是针对 span 元素的，我们将 span 元素绝对定位，使其大小完全相同。它的背景位置将被移到悬停状态的位置，其不透明度设置为 0，并且 CSS3 过渡被设置好。

.arrow span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(sprites.png) no-repeat;
	background-position: -50px 0;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

然后在悬停状态下，不透明度上升

.arrow:hover span {
	opacity: 1;
}

方法二：更具渐进性

我们之所以使用上面的 span 元素，是因为（在撰写本文时）只有 Firefox 4 对伪元素进行过渡。可以合理地认为，将来 WebKit 和其他浏览器也将支持此功能。因此，我们可以像这样清理标记

<a href="#" class="arrow">Arrow</a>

然后，其余 CSS 代码完全相同，只是我们使用 :after 而不是 span 元素。

.arrow:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(sprites.png) no-repeat;
	background-position: -50px 0;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}
.arrow:hover:after {
	opacity: 1;
}

方法三：向后兼容性

某些浏览器根本不支持伪元素或过渡。如果要使此方法尽可能跨浏览器兼容，则必须使用额外的 HTML，并依赖 JavaScript (jQuery…) 来帮助实现。我们又回到了 span 元素。

<a href="#" class="arrow">Arrow<span></span></a>

CSS 代码基本相同，但由于我们不处理任何悬停或淡入操作，因此已简化。

.arrow {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 36px;
	height: 36px;
	background: url(sprites.png) no-repeat;
}
.arrow span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(sprites.png) no-repeat;
	background-position: -50px 0;
}

jQuery 将处理淡入操作。首先，我们将隐藏 span 元素，然后使用 hover 函数附加 mouseenter 和 mouseleave 事件，以实现淡入和淡出。

$(function() {
	$(".arrow")
	.find("span")
	.hide()
	.end()
	.hover(function() {
		$(this).find("span").stop(true, true).fadeIn();
	}, function() {
		$(this).find("span").stop(true, true).fadeOut();
	});
});

所有三个示例

查看演示