悬停时弹出图片css链接 [英] Pop up image css link on hover

问题描述

我尝试使用以下方法
http ：//www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
创建一个弹出的图像悬停效果，我使用php动态生成。我有一个问题，这种技术，每一个图像下载时，页面加载。我如何可以css只下载图像悬停。
现在css是推动图像离开屏幕，当页面加载（左：-1000px;）然后带他们回到视图悬停。可能与css完成这，那么我有什么其他选择？

I am trying to use the following technique http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ to create a pop up image hover effect that I am dynamically generating with php. I have one problem with this technique that every single image is downloaded when the page loads. How can I have css only download the image on hover.? Right now css is pushing the images off the screen when the page loads (left: -1000px;) then brings them back into view on hover.Is it possible with css to accomplish this then what other choices do I have?

推荐答案

而不是将img src属性设置为链接。使用该链接设置属性data-src。当你悬停从data-src属性设置图像的src。浏览器将加载它。

Instead of setting the img src attribute to the link. Set the attribute data-src with that link. When you hover set the src of the image from the data-src attribute. The browser will load it in then.

这篇关于悬停时弹出图片css链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！