为普通的网页添加一些 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 上的入门教程。
尽情链接吧！
使用 CSS 为内联链接创建自己的悬停效果有很多选择。您甚至可以玩转这些效果并创建新的效果。我希望您喜欢这篇文章。继续尝试吧！
以上是CSS链接悬停效应的6个创意的详细内容。更多信息请关注PHP中文网其他相关文章！
什么是CSS Flexbox？Apr 30, 2025 pm 03:20 PM文章讨论了CSS FlexBox，这是一种布局方法，用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法，将其与CSS网格进行了比较，并详细浏览了浏览器支持。
我们如何使用CSS使网站迅速响应？Apr 30, 2025 pm 03:19 PM本文讨论了使用CSS创建响应网站的技术，包括视口元标签，灵活的网格，流体媒体，媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用，并推荐CSS框架
CSS盒装属性有什么作用？Apr 30, 2025 pm 03:18 PM本文讨论了CSS盒装属性，该属性控制了元素维度的计算方式。它解释了诸如Content-Box，Border-Box和Padding-Box之类的值，以及它们对布局设计和形式对齐的影响。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。
Atom编辑器mac版下载
最流行的的开源编辑器
SublimeText3汉化版
中文版，非常好用
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
