6 Creative Ideas for CSS Link Hover Effects

为普通的网页添加一些 CSS 链接悬停效果，可以提升网页的视觉吸引力。如果您曾经在尝试创建炫酷的悬停效果时遇到难题，那么本文将为您提供六种 CSS 效果，您可以直接将它们用于您的下一个项目。

让我们开始吧！

我知道我们正在讨论 :hover，但有时（也许并非总是如此）将 :focus 也包含在内是个好主意，因为并非所有交互都直接来自鼠标，而可能是点击或按键。

滑动高亮链接悬停效果

此效果为内联链接应用一个盒子阴影，同时更改链接文本的颜色。我们首先为链接添加四周的填充，然后添加相同值的负边距，以防止填充破坏文本流。

我们将使用 box-shadow 而不是 background 属性，因为它允许我们进行过渡。

a {
  box-shadow: inset 0 0 0 0 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  box-shadow: inset 100px 0 0 0 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  color: white;
}

登录后复制

文本切换链接悬停效果

这是一个有趣的效果，我们可以在悬停时将链接的文本与其他文本互换。将鼠标悬停在文本上，链接文本会滑出，新的文本会滑入。

演示比描述更容易理解。

此链接悬停效果中包含大量的技巧。但神奇之处在于使用数据属性来定义滑入的文本，并使用链接的 ::after 伪元素的 content 属性来调用它。

首先，HTML 标记：

<p>Hover <a data-replace="get a link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">get a link</a></p>

登录后复制

这是很多内联标记，但您看到的是一个包含链接和 span 的段落标签。

让我们为链接添加一些基本样式。我们需要为其提供相对定位以保持伪元素（将被绝对定位）到位，确保将其显示为内联块以获得框元素样式的便利性，并隐藏伪元素可能导致的任何溢出。

a {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

登录后复制

::before 和 ::after 伪元素应该有一些绝对定位，以便它们与实际链接堆叠在一起。我们将确保它们设置为链接的完整宽度，左位置偏移量为零，为一些滑动操作做好准备。

a::before,
a::after {
 content: '';
  position: absolute;
  width: 100%;
  left: 0;
}

登录后复制

::after 伪元素从 HTML 标记中的链接数据属性获取内容：

a::after {
  content: attr(data-replace);
}

登录后复制

现在我们可以使用 transform: translate3d() 将 ::after 伪元素向右移动 200%。我们在 :hover 上将其移回原位。顺便说一下，我们可以为其在顶部方向设置零偏移量。当我们稍后像文本下划线一样使用 ::before 伪元素时，这将非常重要。

a::after {
  content: attr(data-replace);
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
}

a:hover::after,
a:focus::after {
  transform: translate3d(0, 0, 0);
}

登录后复制

我们还将转换 transform: scale() ::before 伪元素，使其默认隐藏，然后在 :hover 上将其缩放回来。我们将使其高度较小，例如 2px，并将其固定到底部，使其看起来像文本下划线，该下划线会与 ::after 交换。

a::before {
  background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
}

a:hover::before,
a:focus::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

登录后复制

其余的都是偏好设置！我们在转换效果上添加一个过渡，一些颜色等等以获得完整的效果。这些值完全取决于您。

查看完整 CSS 代码

```css a { overflow: hidden; position: relative; display: inline-block; }

a::before, a::after { content: ''; position: absolute; width: 100%; left: 0; } a::before { background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6; height: 2px; bottom: 0; transform-origin: 100% 50%; transform: scaleX(0); transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); } a::after { content: attr(data-replace); height: 100%; top: 0; transform-origin: 100% 50%; transform: translate3d(200%, 0, 0); transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6; }

a:hover::before { transform-origin: 0% 50%; transform: scaleX(1); } a:hover::after { transform: translate3d(0, 0, 0); }

a span { display: inline-block; transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); }

a:hover span { transform: translate3d(-200%, 0, 0); }

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 增长背景链接悬停效果

这是我在很多地方都看到的一种非常流行的效果。其思想是使用链接的 `::before` 伪元素作为粗下划线，它略微位于链接的实际文本后面。然后，在悬停时，伪元素会扩展以覆盖整个内容。

好的，链接的一些基本样式。我们不需要文本装饰，因为 `::before` 将充当文本装饰，然后是一些相对定位以在赋予绝对定位时保持 `::before` 原位。

```css
a {
  text-decoration: none;
  position: relative;
}

登录后复制

现在让我们设置 ::before，使其高度约为 8px，使其看起来像粗下划线。我们还将为其提供绝对定位，以便我们可以控制使其成为实际链接的完整宽度，同时进行偏移，使其位于左侧，并且距离底部只有一点点，使其看起来像是在微妙地突出显示链接。不妨将其设置为 z-index: -1，这样可以确保它位于链接后面。

a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
}

登录后复制

很好。让我们使其看起来像在悬停链接时 ::before 正在增长。我们只需要将高度从 3px 更改为 100% 即可。请注意，我还将底部偏移量恢复为零，以便背景在增长时覆盖更多空间。

a:hover::before {
  bottom: 0;
  height: 100%;
}

登录后复制

现在为这些更改添加轻微的过渡：

a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

登录后复制

查看完整 CSS 代码

```css a { text-decoration: none; color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b18272F; font-weight: 700; position: relative; }

a::before { content: ''; background-color: hsla(196, 61%, 58%, .75); position: absolute; left: 0; bottom: 3px; width: 100%; height: 8px; z-index: -1; transition: all .3s ease-in-out; }

a:hover::before { bottom: 0; height: 100%; }

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 从右到左的颜色交换链接悬停效果

我个人喜欢在导航中的链接中使用此效果。链接以一种颜色开始，没有下划线。然后，在悬停时，一种新颜色从右侧滑入，而下划线从左侧滑入。

很整洁，对吧？那里有很多动作，因此您可能需要考虑可访问性影响，并将所有内容都包含在 `prefers-reduced-motion` 查询中，以便为那些对运动敏感的人替换为更细微的内容。

以下是它的工作原理。我们为链接提供一个线性背景渐变，在中途的两种颜色之间有一个硬停止。

```css
a {
  background-image: linear-gradient(
    to right,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
}

登录后复制

我们将背景设置为链接宽度的两倍，或 200%，并将其完全定位到左侧。这样，就好像只显示了渐变的两种颜色中的一种。

a {
  background-image: linear-gradient(
    to right,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
}

登录后复制

当我们使用几个非标准的 -webkit- 前缀属性时，就会发生神奇的事情。一个去除文本中的颜色使其透明。另一个将背景渐变剪辑到文本，因此文本实际上似乎是背景的颜色。

a {
  background-image: linear-gradient(
    to right,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

登录后复制

还在跟着吗？现在让我们通过使用 ::before 来创建链接的伪下划线。我们将赋予它与链接背景渐变隐藏部分相同的颜色，并将其定位在实际链接下方，使其看起来像一个正确的 text-decoration: underline。

a:before {
  content: '';
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
}

登录后复制

在悬停时，我们将 ::before 滑入到位，从左侧进入：

a:hover {
 background-position: 0;
}

登录后复制

现在，这有点棘手。在悬停时，我们将链接的 ::before 伪元素设置为链接宽度的 100%。如果我们将此直接应用于链接的悬停，我们将使链接本身全宽，这会将其移动到屏幕周围。哎呀！

a:hover::before {
  width: 100%;
}

登录后复制

添加一点过渡以使事情顺利进行：

a {
  background-image: linear-gradient(
    to right,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

登录后复制

查看完整 CSS 代码

```css a { background-image: linear-gradient( to right,

54b3d6,

<code>https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%,
https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%</code>

登录后复制

); background-size: 200% 100%; background-position: -100%; display: inline-block; padding: 5px 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out; }

a:before { content: ''; background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6; display: block; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out; }

a:hover { background-position: 0; }

a:hover::before { width:100%; }

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 彩虹下划线链接悬停效果

我们无法使用 `text-decoration-color: rainbow`，但我们可以通过混合线性渐变和背景魔法来伪造它。

首先，我们删除链接的 `text-decoration`：

```css
a {
  text-decoration: none;
}

登录后复制

现在是渐变。我们在同一个 background 属性上链接两个线性渐变。一个渐变是在悬停之前的初始颜色。第二个是在悬停时的彩虹。

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
}

登录后复制

让我们使背景大小仅为 3px 高，使其看起来像，你知道的，下划线。我们可以同时调整 background-size 属性上的两个渐变的大小，以便初始渐变为全宽和 3px 高，而彩虹为零宽度。

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
}

登录后复制

现在我们可以同时在 background-position 属性上定位背景渐变，以便第一个渐变完全可见，而彩虹被推到视野之外。哦，让我们确保在使用时背景不会重复。

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
}

登录后复制

让我们在悬停时更新 background-size，以便渐变交换值：

a:hover {
  background-size: 0 3px, 100% 3px;
}

登录后复制

最后，在悬停发生时进行一点过渡：

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

登录后复制

瞧！

通过下划线链接悬停效果

Geoff Graham 在最近分析 Adam Argyle 的炫酷悬停效果时实际上也介绍了这个效果。在他的演示中，链接后面的背景颜色从左侧进入，然后在鼠标移出时从右侧退出。

我的版本将背景简化为更像下划线。

a {
  position: relative;
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b18272F;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

登录后复制

这并不是实现此目的的唯一方法！以下是 Justin Wong 使用背景的另一种方法：

Geoff 还提供了一系列 CSS 链接悬停效果，从整洁到完全荒谬。值得一看！有关链接和按钮样式的实用内容，请查看 Philip Zastrow 在 DigitalOcean 上的入门教程。