使用 CSS 和 JavaScript 的快速全屏悬停效果

在今天的教程中，我们将学习如何构建有用的全屏背景悬停效果。

俗话说：“一图胜千言”，那么让我们看看我们要创建什么：

See the Pen Build a Full-Screen Background Hover Effect by Envato Tuts+ (@tutsplus) on CodePen.

在现实世界的场景中，您可能会将这种效果用作您的产品、投资组合项目、照片等的快速查看模式。让我们开始吧！

1. 从页面标记开始

我们将首先标记两个元素：

<div class="bg"></div>
<div class="container">...</div>

该.bg元素将是一个空元素。

该.container 元素将保存页面内容。在其中，我们将放置四个链接。data-bg我们将通过自定义属性将每个链接与图像相关联，如下所示：

<a data-bg="IMG_SRC">...</a>

2. 添加css

让我们继续一些基本的 CSS。

我们将给出 .container最大宽度并水平对齐其内容：

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 10px;
}

出于文体原因，text-decoration: underline我们将使用 aborder-bottom来为文本链接添加下划线，而不是默认属性值：

/*CUSTOM VARIABLES HERE*/

.container a {
  position: relative;
  border-bottom: 2px dashed var(--red);
  transition: all 0.2s;
}

接下来，我们将为::before链接定义伪元素。这最初将被隐藏。每次我们将鼠标悬停在其父链接上时，它都会出现“关闭”水平效果。

它的初始样式：

/*CUSTOM VARIABLES HERE*/

.container a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-height: 30px;
  transform: translate(-50%, -50%) scaleX(0);
  padding: 10px;
  z-index: -1;
  transform-origin: 50%;
  background: var(--white);
}

默认情况下，该.bg元素也将在视觉上隐藏 ( opacity: 0)。另外，它将被绝对定位并覆盖其容器的整个宽度和高度（在本例中为body）。

以下是它的初始样式：

.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: all 0.3s ease-out;
}

3. 添加 javascript

预加载图像

准备好 html 和 CSS 后，下一个必要步骤是预加载data-bg图像。我们只需几行代码就可以做到这一点：

const links = document.queryselectorAll(".container a");

for(const link of links) {
const img = new Image();
img.src = link.dataset.bg;
}

此代码遍历所有页面链接，获取每个属性的值，并使用构造函数data-bg创建一些实例。imgImage()

所以现在如果我们重新加载演示页面并查看浏览器检查器的网络选项卡，我们将看到所有图像都已下载/预加载：

这是防止我们第一次将鼠标悬停在链接上时发生的白色闪光的重要措施。如果没有预加载，此时浏览器还没有下载图像，并且可能需要一段时间才能显示图像。

如果您想测试此行为，请先注释上述代码，然后打开“网络”选项卡并重新加载页面。

切换图像

每次我们将鼠标悬停在链接上时，我们应该执行以下操作：

获取存储在 data-bg属性中的相关图像。
将该图像设置为.bg元素的背景图像。
将bg-show类添加到body. 这个类将确保两件事。首先，.bg除了活动链接之外，它将以淡入效果出现并位于每个元素的顶部。其次，活动链接的伪元素将出现水平快门效果。

另一方面，每次光标离开链接时，我们都会bg-show从中删除类，body然后.bg会消失。

下面是相应的 JavaScript 代码：

const links = document.querySelectorAll(".container a");
const bg = document.querySelector(".bg");
const showClass = "bg-show";

for(const link of links) {
  link.addeventListener("mouseenter", function() {
    bg.style.backgroundImage = `url(${this.dataset.bg})`;
    document.body.classList.add(showClass);
  });

  link.addEventListener("mouseleave", () => {
    document.body.classList.remove(showClass);
  });
}

以及相关的样式：

/*CUSTOM VARIABLES HERE*/

.bg-show .bg {
  z-index: 1;
  opacity: 1;
}

.bg-show a:hover {
  z-index: 2;
  border-bottom-color: transparent;
  color: var(--red);
}

.bg-show .container a:hover::before {
  transform: translate(-50%, -50%) scaleX(1);
  transition: transform 0.2s 0.1s ease-out;
}