弹出图像css链接上悬停

我想要使用以下技术 http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ 创建一个弹出式图像悬停效果，我动态生成与PHP。这种技术有一个问题，即在页面加载时下载每个图像。我怎样才能让css只下载悬停的图片？现在，当页面加载时，css会将图像从屏幕上推出（left：-1000px;）然后将它们带回到悬停视图中。是否可以用css来完成此操作，然后我还有其他选择吗？弹出图像css链接上悬停

来源

2011-07-21 spaghettiwestern

jQuery的将是一个非常简单的方法来做到这一点 –

看看懒加载使用jQuery您的图像：http://www.appelsiini.net/projects/lazyload

这里有一些其他的选择：http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/

来源

2011-07-21 19:18:26 Digitz

显然是延迟加载插件不会在最新的浏览器。 –

刚刚在Chrome中进行测试，lazyload确实有效（它会在首次加载完成后需要更多图片才能进行调用）。 –

而不是设置在img src属性的链接。使用该链接设置属性data-src。当你悬停时从data-src属性中设置图像的src。浏览器会在那里加载它。

来源

2016-02-27 06:16:07

HTML代码这里

.gallerycontainer { 
 
    position: relative; 
 
} 
 
.thumbnail img { 
 
    border: 1px solid white; 
 
    margin: 0 5px 5px 0; 
 
} 
 
.thumbnail:hover { 
 
    background - color: transparent; 
 
} 
 
.thumbnail:hover img { 
 
    border: 1px solid blue; 
 
} 
 
.thumbnail span { 
 
    position: absolute; 
 
    background - color: lightyellow; 
 
    padding: 5px; 
 
    left: -1000px; 
 
    border: 1px dashed gray; 
 
    visibility: hidden; 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
.thumbnail span img { 
 
    border - width: 0; 
 
    padding: 2px; 
 
} 
 
.thumbnail:hover span { 
 
    visibility: visible; 
 
    top: 0; 
 
    left: 230px; 
 
    z-index: 50; 
 
}

<div class="gallerycontainer"> 
 
    <a href="#thumb" class="thumbnail"> 
 
    <img width="100px" border="0" height="66px" src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg"><span><img src="http://www.dynamicdrive.com/cssexamples/media/tree.jpg"><br>Simply beautiful.</span> 
 
    </a> 
 
    <a href="#thumb" class="thumbnail"> 
 
    <img width="100px" border="0" height="66px" src="http://www.dynamicdrive.com/cssexamples/media/ocean_thumb.jpg"><span><img src="http://www.dynamicdrive.com/cssexamples/media/ocean.jpg"><br>So real, it's unreal. Or is it?</span> 
 
    </a> 
 
    <br> 
 
</div>

来源

2016-02-27 06:39:49

这将仍然加载页面加载时的图像。尽管这已经快5年了，但这不是他想要的。 – MortenMoulder

弹出图像css链接上悬停

回答

相关问题