mouseover提示_快速提示：如何构建MouseOver导航幻灯片效果-CSDN博客

mouseover提示

您是否曾经在项目中使用过Slider Revolution WordPress插件？如果答案是“是”，则您可能已经注意到出现在插件配置页面右上角的迷你工具栏。

最初，只有图标可见，从而使整个结构保持美观和紧凑。然后，每次将鼠标悬停在图标上时，都会通过平滑的滑入动画来显示其关联的文本。

在今天的练习中，让我们从这种效果中汲取灵感并构建类似的东西。这是我们将努力的方向：

我们将很快完成此过程，首先写出我们的标记，使用CSS对其进行样式设置，然后最后添加一些JavaScript行为。在开始之前，我们还将介绍仅CSS方法。让我们开始吧！

关于滑块革命的一切

1.从页面标记开始

我们将从包含标题和无序列表的标题开始。每个列表项将包含一个按钮。该元素将用作SVG图标及其对应文本的包装。

这是必需的标记：

<header>
  <h1>Mini Toolbar</h1>
  <ul>
    <li>
      <button>
        <svg>...</svg>
        <span>Pages</span>
      </button>
    </li>
    <li>
      <button>
        <svg>...</svg>
        <span>Collection</span>
      </button>
    </li>
    <li>
      <button>
        <svg>...</svg>
        <span>Appearance</span>
      </button>
    </li>
    <li>
      <button>
        <svg>...</svg>
        <span>Options</span>
      </button>
    </li>
    <li>
      <button>
        <svg>...</svg>
        <span>Search</span>
      </button>
    </li>
  </ul>
</header>

此处使用的图标取自Envato Elements 。您可能会认识到该图标集，因为我在上一教程中已经将其用作SVG精灵的一部分。

2.使用CSS定义样式

标头将充当flex容器。它的子项将垂直居中并在主轴上分布。我们还将为它提供最大宽度并将其水平居中：

/*CUSTOM VARIABLES HERE*/

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  padding-left: 15px;
  margin: 0 auto;
  border-radius: 5px;
  background: var(--blue);
}

列表和按钮都是具有垂直居中内容的flex容器：

header ul,
header button {
  display: flex;
  align-items: center;
}

所有按钮将具有不同的颜色，并且某些颜色值将与Slider Revolution的迷你工具栏的值匹配。当鼠标悬停在按钮上时，由于CSS的原生filter()函数，其颜色将略微变浅。

我们还将给他们overflow: hidden因为我们想在幻灯片动画期间隐藏它们的溢出内容：

/*CUSTOM VARIABLES HERE*/

header button {
  padding: 15px;
  overflow: hidden;
  transition: filter 0.25s;
}

header li:nth-child(1) button {
  background: var(--green);
}

header li:nth-child(2) button {
  background: var(--lightblue);
}

header li:nth-child(3) button {
  background: var(--gray);
}

header li:nth-child(4) button {
  background: var(--red);
}

header li:nth-child(5) button {
  background: var(--orange);
}

header button:hover {
  filter: brightness(110%);
}

SVG图标

SVG将具有白色。并且，如前所述，文本最初将被隐藏。当我们将鼠标悬停在父按钮上时，它将变为可见：

/*CUSTOM VARIABLES HERE*/

header button svg {
  fill: var(--white);
}

header button span {
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease-out;
}

header button:hover span {
  margin-left: 15px;
  opacity: 1;
  visibility: visible;
}

3. JavaScript：侦听鼠标事件

DOM准备就绪后，我们将抓住所有标题按钮。然后，我们将遍历它们并执行以下操作：

抓取其文本元素并计算其默认宽度。
然后，将该元素的宽度设置为0。
每次将鼠标悬停在按钮上时，都会重置其文本元素的默认宽度。
然后，每当我们停止将鼠标悬停在按钮上时，都会将其宽度设置为0。

这是完成此行为JavaScript：

const buttons = document.querySelectorAll("header button");

buttons.forEach(el => {
  // 1
  const span = el.lastElementChild;
  const width = span.offsetWidth;
  // 2
  span.style.width = 0;
  // 3
  el.addEventListener("mouseenter", () => {
    span.style.width = `${width}px`;
  });
  // 4
  el.addEventListener("mouseleave", () => {
    span.style.width = 0;
  });
});