鼠标悬停时弹出图像
最近，我需要实现一个鼠标悬停时弹出图片的功能。上面的 GIF 动画演示了我的需求。一开始我不知道该怎么做，但经过几分钟的搜索，我找到了一种无需 JavaScript 就能轻松实现的方法。这种方法是将两张图片并排放置：一张是缩略图（较小的图片），另一张是较大的图片，当鼠标悬停在缩略图上时，较大的图片就会出现。让我们开始吧！
第一步：
我们将并排显示两张图片，缩略图和大图，如下面的代码块所示。因此，请在您的 HTML 文件中添加以下代码，并记得正确链接您的图片文件。
<main>
<ul>
<li>
<img src="img/thumbnail1.jpg" alt="adventure" >
<span class="large">
<img src="img/large1.jpg" class="large-image" alt="adventure" >
</span>
</li>
<li>
<img src="img/thumbnail2.jpg"" alt="cat" >
<span class="large">
<img src="img/large2.jpg" class="large-image" alt="cat" >
</span>
</li>
<li>
<img src="img/large3.jpg" alt="adventure" >
<span class="large">
<img src="img/large3.jpg" class="large-image" alt="adventure" >
</span>
</li>
</ul>
</main>
由于我们使用的是无序列表，我们将在 CSS 中设置 ` ul<div>` 和`<img>` 标签的样式li，以移除列表样式。此外，我们将所有列表项设置为行内显示，并将图像设置为应用样式。在链接到 HTML 代码的 CSS 文件中添加以下内容：
ul {
display: flex;
}
li {
list-style-type: none;
padding: 10px;
position: relative;
}
现在，我们的页面应该看起来像这样。
第二步
接下来，我们将使用绝对定位来隐藏较大的图片。我们将使用之前添加到span放置较大图片的元素上的类。
.large {
position: absolute;
left: -9999px;
}
现在，只剩下较小的图像了。
让我们添加一些样式，使鼠标悬停在小图片上时，大图片能够弹出。
li:hover .large {
left: 20px;
top: -150px;
}
就是这样。鼠标悬停在小图上时，就会出现大图。
我们可以更进一步，给图片添加阴影，甚至在每张图片下方添加文字。我决定添加阴影，并给大图添加圆角边框。
.large-image {
border-radius: 4px;
box-shadow: 1px 1px 3px 3px rgba(127, 127, 127, 0.15);;
}
好了，我们完成了。你做过类似的事情吗？你是怎么做的？我很想知道。
文章来源：https://dev.to/sarah_chima/image-popup-on-hover-1kee