CSS:悬停状态图像缓存

Question

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

Answer 1

如果你试图避免你的悬停状态图像只加载它们,它们正在徘徊,而不是预加载它们,为什么不创建同时保存正常和悬停图像的精灵？这样您就可以确保已经加载了所有悬停状态图像,同时减少了所有请求的开销.您需要做的唯一事情是设置background-position属性的值.

至于你的第一个问题,我想找到答案的最好方法是使用两个大图像(几个壁纸可以工作)并自己测试,虽然我怀疑只有当鼠标悬停在图像上时才会加载图像原始图像,因为那是在执行代码时.

希望这可以帮助 !

Answer 2

如果您有一个div高度20px,比如说,并希望在悬停时更改背景图像,请使用包含无悬停和悬停图形的图像,顶部没有悬停,底部悬停图像.这两个部分应该是你的div的高度,在这种情况下,20px.然后,background-position首先将CSS设置为0px 0px(左上角).这是默认值(无悬停).

当用户将鼠标悬停在上面时div,设置background-position为0px -20px(20px向上).这会将背景图像向上移动20px,显示精灵的下半部分,即悬停图形.当鼠标从div中移除时,精灵将回落到它的原始位置.

CSS:

.hoverDiv          /* Normal state */
{
    background: url('images/img.png');
    background-position: 0px 0px;
}

.hoverDiv:hover    /* Hover state */
{
    background-position: 0px -20px;     /* Move background up by 20px, hiding the top image */
}

如果你有div不同的高度,只需改变20pxdiv的高度位.

如果你的精灵并排而不是彼此重叠,则使用background-position: -20px 0px;而不是移动X轴0px -20px;.当然,你也可以积极地移动背景.

希望这可以帮助,

詹姆士