应按LVHA顺序使用:hover和:visited伪类，仅用color等安全属性区分状态，:visited:hover可微调已访问链接悬停效果，禁用transform、box-shadow等非安全属性。
给链接添加访问提示，核心是合理组合 :hover 和 :visited 伪类，并注意浏览器的安全限制——:visited 只能修改有限的 CSS 属性（如 color、background-color、border-color 等），不能读取或影响布局、尺寸或触发动画。
最常用的方式是用颜色区分“未访问”、“已访问”和“悬停”状态。注意声明顺序很重要：:link → :visited → :hover → :active（LVHA 顺序），否则 :visited 可能被覆盖。
示例：
a:link { color: #007bff; text-decoration: none; }
a:visited { color: #6c757d; }
a:hover { color: #0056b3; text-decoration: underline; }
a:active { color: #004085; }可在悬停时添加图标或动态下划线，但需确保已访问链接仍有可辨识变化。由于 :visited 无法使用 ::after 伪元素内容（多数浏览器禁用），推荐用纯 CSS 属性控制：
立即学习“前端免费学习笔记（深入）”；
border-bottom 实现悬停下划线，已访问链接可设不同颜色或粗细:visited 中使用 transform 或 opacity（部分属性受限）:hover 中显示（:visited:hover 是允许的）现代浏览器为防止历史嗅探攻击，大幅限制了 :visited 的样式能力：
:visited 样式（如 getComputedStyle 返回默认值）:visited 中设置 outline、box-shadow、transition 等非安全属性:visited:hover 是合法组合，可用于微调已访问链接的悬停效果兼顾美观与可用性的一种写法：
a {
color: #2563eb;
transition: color 0.2s;
}
a:visited { color: #64748b; }
a:hover { color: #1d4ed8; }
a:visited:hover { color: #475569; }这样既保持语义清晰，又提供平滑反馈，且完全符合浏览器安全策略。
以上就是css如何给链接加访问提示_组合hover与visited的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
340
收藏
