如何让缩略图在悬停时显示更大的原始图像？

Question

我为图片库创建了一个无序列表。悬停时它当前显示缩略图，如何调整我的代码以使其显示原始的较大图像？

我当前代码的一部分：

.gallery {
    cursor: default;
    list-style: none;
}
.gallery a {
    cursor: default;
}
.gallery a .preview {
    display: none;
}
.gallery a:hover .preview {
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
}
.gallery img {
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    padding: 2px;
    vertical-align: top;
    width: 100px;
    height: 75px;
}
.gallery li {
    background: #eee;
    border-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
}
.gallery .preview {
    border-color: #000;
    width: 200px;
    height: 150px;
}

<div class="pictures">
  <h1>S.O.S - Image Gallery</h1>
  <ul class="gallery">
    <li>
      <a href="#">
        <img src="thumb/thumb2.jpg" alt="Newcastle PSA workplace group at the IRC." />
        <img src="thumb/thumb2.jpg" alt="Newcastle PSA workplace group at the IRC." class="preview" />
      </a>
    </li>
  </ul>
</div>

Answer 1

已经可以使用了，您只需换出第二张图片：https://jsfiddle.net/3q29wvyv/1/。

.gallery {
         cursor: default;
         list-style: none;
         }

   .gallery a {
         cursor: default;
         }

   .gallery a .preview
         {
          display: none;
         }

   .gallery a:hover .preview
         {
         display: block;
         position: absolute;
         top: -33px;
         left: -45px;
         z-index: 1;
         } 

   .gallery img {
         background: #fff;
         border-color: #aaa #ccc #ddd #bbb;
         border-style: solid;
         border-width: 1px;
         color: inherit;
         padding: 2px;
         vertical-align: top;
         width: 100px;
         height: 75px;
         }

   .gallery li
         {
         background: #eee;
         border-color: #ddd #bbb #aaa #ccc;
         border-style: solid;
         border-width: 1px;
         color: inherit;
         display: inline;
         float: left;
         margin: 3px;
         padding: 5px;
         position: relative;
         }

   .gallery .preview
         {
         border-color: #000;
         width: 200px;
         height: 150px;
         }

<div class="pictures">
   <h1>S.O.S - Image Gallery</h1>
   <ul class="gallery">
   <li><a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Thumbnail1.jpg" alt="Newcastle PSA workplace group at the IRC." /><img src="https://www.trophycupcakes.com/sites/default/files/styles/standard_cupcake_detail/public/cupcakes/cupcake-red-velvet.jpg?itok=Zyu04GZ6" alt="Newcastle PSA workplace group at the IRC." class="preview" /></a>
   </li>
   </ul>
   </div>

Answer 2

只需将大图的文件名写入第二个 img 标签（带有 class="preview" 的标签）

如何让缩略图在悬停时显示更大的原始图像？

how do I get the thumbnails to display the larger original image on hover?

html

css

image-gallery