html - 没有 JS 的 Css 交换图像

Question

我正在我们的餐厅网站上工作，我正在尝试一些新的东西来显示菜单。当悬停在缩略图上时，我使用悬停来显示更大的图像。我对布局和功能感到满意，但我担心所有菜单项都打开时的加载时间。

我看到的问题是，加载页面时会加载所有图片，并且在您将鼠标悬停在缩略图上之前，这些图片都是不可见的。我不想使用 JS，因为我不想真正的弹出窗口可以被阻止。

有没有其他方法可以用puse css达到同样的效果？

页面在这里http://www.thejunctioncafe-paphos.com/menu_junction_cafe.html

CSS

ul.enlarge{
list-style-type:none;
margin-left:0px;
width: 700px;
margin:auto;



}
ul.enlarge li{
display:inline-block; 
position: relative;
z-index: 0; /
margin:10px 10px 0 10px;
}

ul.enlarge img{
background-color:#eae9d4;
padding: 6px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
}
ul.enlarge span{
position:absolute;
left: -3999px;
background-color:#eae9d4;
padding: 10px;
font-family: 'Calibri', sans-serif;
font-size:.9em;
text-align: center; 
color: #000; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius:8px;
}
ul.enlarge li:hover{
z-index: 50;
cursor:pointer;
}
ul.enlarge span img{
padding:2px;
background:#ccc;
}
ul.enlarge li:hover span{ 
top: -350px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge li:hover:nth-child(2) span{
left: -100px; 
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px; 
}
ul.enlarge img, ul.enlarge span{
behavior: url(scripts/PIE.htc); 
}

Answer 1

当您使用 javascript 创建弹出窗口而不是加载图像时，弹出窗口会被阻止。因此，只需在页面完成后使用 javascript 加载图像即可。然后让您的图片像现在一样弹出。

如果您想做得更好，请在用户将鼠标悬停在缩略图上时加载图像，前提是他会点击它。