如何使用JavaScript鼠标事件制作多预览缩略图

在本教程中，我们将通过构建一些有用且有趣的东西来使JavaScript鼠标事件有趣一些：缩略图，当鼠标悬停在缩略图上时，可以显示各种不同的电子书。

这是我们将要构建的演示（将鼠标移到每个缩略图上）：

每个缩略图都会根据光标位置显示隐藏在其下方的相应电子书。 这是一种预览可用内容的理想方法（在这种情况下，在Envato Tuts +电子书库中 ）。

构建此模型时，我们将使用CSS Grid Layout和JavaScript mousemove事件。

1. HTML标记

我们将使用的标记非常简单； 一个普通的无序列表，每个列表项（卡片）中都有一些大小相等的图像。

<ul class="cards">
  <li class="card">
    <img src="IMG_SRC" alt="">
    <!-- 4 more images here -->
  </li>
  <li class="card">
    <img src="IMG_SRC" alt="">
    <!-- 3 more images here -->
  </li>
  <li class="card">
    <img src="IMG_SRC" alt="">
    <!-- 2 more images here -->
  </li>
  <li class="card">
    <img src="IMG_SRC" alt="">
    <!-- 1 more image here -->
  </li>
</ul>

2. CSS

现在，关于CSS样式，有两点很重要：