当用户将鼠标悬停在“禁用”(灰色)图标上时，我使用以下 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; }
它工作正常，但有一个烦恼:用户第一次将鼠标悬停在“禁用”图标上时，在“热”图标出现之前会有轻微的延迟。所有随后的鼠标悬停都将立即显示“热”图标。有什么方法可以防止第一次鼠标悬停时发生这种延迟？
最佳答案
这是一个常见的问题，有以下三种解决方法:
- 使用 JavaScript 预加载文件。
- 使用另一个可见元素预加载文件，但隐藏了一些涉及 z 顺序的技巧。
- 使用 CSS Sprite :http://css-tricks.com/css-sprites/
关于css - 将鼠标悬停在 "hot"图标上时，如何防止延迟显示 "disabled"图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13371631/