我正在处理的网站有一个列表 ul超过 100 ( li ) 个要点。他们每个人都链接到另一个 html 站点。
每当您将鼠标悬停在其中一个链接上时，我想显示图像预览。图像应从左侧缓慢滑入。
由于每个预览图像的大小高达 40kb，我实际上不想预加载图像。 什么是最好的预防方法？ 如果可能的话，我想只通过 CSS 而不是 JS 来做到这一点。
我的想法:
a) 默认状态:<img> -标记为 display:none;悬停状态:将其设置为 display:inline .问题:transition不适用于 display :(.
b) 只需使用 div相反，为每个 li 编写一个 CSS 规则，以便在悬停时将带有预览图像的相应背景图像分配给它。
这会阻止图像的预加载吗？
最佳答案
如果您将其添加为背景图片，但仅在悬停时显示，则直到用户将鼠标悬停在具有该样式的任何内容上时，图像才会加载。您应该能够内联设置背景图像，而不是将图像文件输出为 IMG
关于css - 防止预加载图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9708098/