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

css悬停效果

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

俗话说：“一张图片值得一千个单词”，让我们来看看我们将要创建的内容：

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

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;
}

出于样式原因，我们将使用border-bottom在文本链接下划线，而不是默认的text-decoration: underline属性值：

/*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属性的值，并使用Image()构造函数创建一些img实例。

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

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

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

切换图像

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

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

另一方面，每次光标离开链接时，我们都会从body删除bg-show类， .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;
}

结论

那就是所有人！ 仅用几行代码，我们就创建了一个有趣的全屏背景悬停效果。

希望您喜欢这个演示，并从即将到来的项目中为构建类似内容获得灵感。

与往常一样，非常感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/tutorials/a-quick-full-screen-background-hover-effect--cms-33656

css悬停效果