css - 将鼠标悬停在 "hot"图标上时，如何防止延迟显示 "disabled"图标？

Question

当用户将鼠标悬停在“禁用”(灰色)图标上时，我使用以下 CSS 代码显示“热”(彩色)图标:

.pic a:link { background: url(http://www.mydomain.com/media/disabled/pic.png) top center no-repeat; }
.pic a:hover { background: url(http://www.mydomain.com/media/hot/pic.png) top center no-repeat; }
.pic a:active { background: url(http://www.mydomain.com/media/normal/pic.png) top center no-repeat; }

它工作正常，但有一个烦恼:用户第一次将鼠标悬停在“禁用”图标上时，在“热”图标出现之前会有轻微的延迟。所有随后的鼠标悬停都将立即显示“热”图标。有什么方法可以防止第一次鼠标悬停时发生这种延迟？

Answer 1

这是一个常见的问题，有以下三种解决方法:

1. 使用 JavaScript 预加载文件。
2. 使用另一个可见元素预加载文件，但隐藏了一些涉及 z 顺序的技巧。
3. 使用 CSS Sprite :http://css-tricks.com/css-sprites/