html – CSS-Only图片缩略图库

概述虽然我已经查看了许多仅限CSS的脚本,但我无法弄清楚如何在默认情况下显示第一个图像,而不是在第一个图像打开时显示空白.这必须只是CSS – 不允许使用 javascript和其他“活动内容”.请指教. .container { width: 600px; position: relative;}.gallerycontainer { position: relative; h 虽然我已经查看了许多仅限CSS的脚本,但我无法弄清楚如何在默认情况下显示第一个图像,而不是在第一个图像打开时显示空白.这必须只是CSS – 不允许使用 javascript和其他“活动内容”.请指教.

.container {  wIDth: 600px;  position: @R_419_4614@;}.gallerycontainer {  position: @R_419_4614@;  height: 600px;  /*Add a height attribute and set to largest image's height to prevent overlaying*/}.thumbnail img {  border: 1px solID white;  margin: 0 5px 5px 0;}.thumbnail:hover {  background-color: transparent;}.thumbnail:hover img {  border: none;}.thumbnail span {  /*CSS for enlarged image*/  position: absolute;  background-color: lightyellow;  padding: 5px;  left: -1000px;  border: none;  visibility: hIDden;  color: black;  text-decoration: none;}.thumbnail span img {  /*CSS for enlarged image*/  border-wIDth: 0;  padding: 2px;}.thumbnail:hover span {  /*CSS for enlarged image*/  visibility: visible;  top: 0;  left: 150px;  /*position where enlarged image should offset horizontally */  z-index: 50;}

<div >  <div >    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span>    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span><br />    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span>    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span><br />    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span>    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span><br />    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span>    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span><br />    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span>    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span><br />    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span>    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span><br />    </a>  </div></div>

解决方法

.container:not(:hover) .thumbnail:first-child img + span {    visibility: visible;    left: 150px;}.container {    wIDth: 134px;}

……应该这样做.

如果宽度：134px; on .container是一个问题,为它添加一个margin-right来补偿缺失的宽度.

要在较短的图像和跳跃的拇指上修复悬停问题,您可能需要添加更多行,从而导致：

.container:not(:hover) .thumbnail:first-child img + span {    visibility: visible;    left: 150px;}.container {    wIDth: 134px;    display: flex;    flex-wrap: wrap;}.thumbnail:hover > img {    border: 1px solID transparent;}

更新的代码段：

.container {  wIDth: 134px;  margin-right: 466px;  position: @R_419_4614@;  display: flex;  flex-wrap: wrap;}.container:not(:hover) .thumbnail:first-child img + span {    visibility: visible;    left: 150px;}.gallerycontainer {  position: @R_419_4614@;  height: 600px;  /*Add a height attribute and set to largest image's height to prevent overlaying*/}.thumbnail img {  border: 1px solID white;  margin: 0 5px 5px 0;}.thumbnail:hover {  background-color: transparent;}.thumbnail:hover > img {  border: 1px solID transparent;}.thumbnail span {  /*CSS for enlarged image*/  position: absolute;  background-color: lightyellow;  padding: 5px;  left: -1000px;  visibility: hIDden;  color: black;  text-decoration: none;}.thumbnail span img {  /*CSS for enlarged image*/  border-wIDth: 0;  padding: 2px;}.thumbnail:hover span {  /*CSS for enlarged image*/  visibility: visible;  top: 0;  left: 150px;  /*position where enlarged image should offset horizontally */  z-index: 50;}

<div >  <div >    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500x300" wIDth="60" /><span><img src="http://www.placehold.it/500x300" wIDth="500" /></span>    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/400x500" wIDth="60" /><span><img src="http://www.placehold.it/400x500" wIDth="500" /></span><br />    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500x350" wIDth="60" /><span><img src="http://www.placehold.it/500x350" wIDth="500" /></span>    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500x250" wIDth="60" /><span><img src="http://www.placehold.it/500x250" wIDth="500" /></span><br />    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/350x500" wIDth="60" /><span><img src="http://www.placehold.it/350x500" wIDth="500" /></span>    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span><br />    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/450x500" wIDth="60" /><span><img src="http://www.placehold.it/450x500" wIDth="500" /></span>    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span><br />    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500x200" wIDth="60" /><span><img src="http://www.placehold.it/500x200" wIDth="500" /></span>    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500x450" wIDth="60" /><span><img src="http://www.placehold.it/500x450" wIDth="500" /></span><br />    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span>    </a>    <a  href="#thumb"><img border="0" src="http://www.placehold.it/500" wIDth="60" /><span><img src="http://www.placehold.it/500" wIDth="500" /></span><br />    </a>  </div></div>

注意：此代码需要在CSS的末尾加载/应用.或者修改当前CSS中的属性.

总结

以上是内存溢出为你收集整理的html – CSS-Only图片/缩略图库全部内容，希望文章能够帮你解决html – CSS-Only图片/缩略图库所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。