如何在CSS中使用伪类:link:hover控制链接悬停效果_结合:link:hover调整字体和背景-css教程-PHP中文网

如何在CSS中使用伪类:link:hover控制链接悬停效果_结合:link:hover调整字体和背景

P粉602998670

发布： 2025-12-04 09:13:02

原创

747人浏览过

使用 a:link:hover 可精准设置未访问链接的悬停样式，如改变颜色、字体、背景等，且需遵循 LVHA 顺序以确保优先级正确。

如何在css中使用伪类:link:hover控制链接悬停效果_结合:link:hover调整字体和背景

在CSS中，可以通过组合使用 :link 和 :hover 伪类来精确控制未访问链接在鼠标悬停时的样式。这种写法能让你针对普通链接（即未访问过的链接）设置独特的悬停效果，比如调整字体样式、颜色以及背景等。

理解 :link 和 :hover 的作用

:link 用于选择所有未被访问的超链接（即带有 href 属性且用户尚未点击过的 a 标签）。:hover 则在鼠标指针悬浮在元素上时触发。将两者结合写成 a:link:hover，表示“当用户将鼠标悬停在一个未访问链接上时应用这些样式”。

这种写法可以避免影响已访问链接（:visited）、激活状态（:active）或其它状态的链接样式，实现更精细的控制。

设置字体样式与背景效果

在 a:link:hover 中，你可以自由修改字体、背景色、文字颜色等视觉属性。例如：

Bardeen AI

使用AI自动执行人工任务

154

查看详情

立即学习“前端免费学习笔记（深入）”；

a:link {
    color: #0066cc;
    text-decoration: none;
    font-weight: normal;
    background-color: transparent;
}

a:link:hover {
    color: #ff4500;
    font-weight: bold;
    text-decoration: underline;
    background-color: #f0f8ff;
    transition: background-color 0.3s ease;
}

登录后复制

说明：