CSS：悬停状态图像缓存答案

【问题标题】：CSS: Hover State images cacheCSS：悬停状态图像缓存
【发布时间】：2010-12-02 10:03:37
【问题描述】：

当我们定义任何 CSS 的悬停状态...& 在悬停状态时，我们更改 background:url('image path'); 是否会预加载此图像将在元素的第一次悬停时下载.. 如果是这样，那么如何预加载它...我知道用于预加载图像的 javascript.. 是否可行...

【问题讨论】：

标签： css hover preload

【解决方案1】：

如果您想避免只加载悬停状态图像而不是预加载它们，为什么不创建同时保存正常图像和悬停图像的精灵呢？这样您就可以确保所有悬停状态图像都已加载，同时降低所有请求的开销。然后，您唯一需要做的就是设置 background-position 属性的值。

至于你的第一个问题，我想找到答案的最好方法是使用两张大图片（几张壁纸就可以了）并自己测试，尽管我怀疑这些图片只会在鼠标加载时加载是在原始图像之上，因为那是代码正在执行的时候。

希望这会有所帮助！

【讨论】：

答案是听到:hover 状态代码将在鼠标悬停时执行，因此background:url('image path'); 将在鼠标悬停后下载图像&是的，使用精灵的其他人都是对的...但这不是我的问题

【解决方案2】：

如果您有一个高度为20px 的div，并且希望在悬停时更改背景图像，请使用其中包含非悬停图形和悬停图形的图像，并且将非悬停在顶部和底部的悬停图像。这两个部分都应该是您的 div 的高度，在本例中为 20px。然后，首先将您的 CSS background-position 设置为 0px 0px（左上角）。这是默认设置（无悬停）。

当用户将鼠标悬停在div 上时，将background-position 设置为0px -20px（向上20 像素）。这会将背景图像向上移动 20 像素，显示精灵的下半部分，即悬停图形。当鼠标从 div 上移开时，精灵会回到原来的位置。

CSS：

.hoverDiv /* 正常状态 */ { 背景：url('images/img.png'); 背景位置：0px 0px； } .hoverDiv:hover /* 悬停状态 */ { 背景位置：0px -20px； /* 将背景向上移动 20px，隐藏顶部图像 */ }

如果您有不同高度的div，只需将20px 位更改为div 的高度即可。

如果您的精灵并排而不是彼此重叠，请使用background-position: -20px 0px; 而不是0px -20px; 移动X 轴。当然，你也可以正向移动背景。

希望对你有帮助，

詹姆斯

【讨论】：

【解决方案3】：

你可以使用css sprites

【讨论】：

【解决方案4】：

最好的办法是使用 CSS Sprites。精灵表是一个大图像，里面有很多图像，将在您的网站上使用。有什么好处？好吧，这意味着只发送一个 http 请求来下载您的所有图像。因此，使网站加载速度稍快。

它真的可以很好地与悬停效果一起使用！

它更容易使用加上简单的代码。不像 JavaScript，代码乱七八糟。这很容易学习。基于图像在精灵中的位置。这是一个有用的教程，在Flowdev。这是W3Schools上的示例

【讨论】：