CSS 链接
:link/:visited/:hover/:active 四种状态、链接按钮化
CSS 链接
链接有四种状态——:link、:visited、:hover、:active，按顺序定义。
学完本章你将： 掌握链接四种状态、按钮化链接、去除下划线。
四种状态
css
/* LVHA 顺序：link → visited → hover → active */
a:link { color: blue; } /* 未访问 */
a:visited { color: purple; } /* 已访问 */
a:hover { color: red; } /* 悬停 */
a:active { color: orange; } /* 点击瞬间 */链接样式化
css
a {
color: #2196F3; /* 品牌色 */
text-decoration: none; /* 去下划线 */
transition: color 0.3s; /* 过渡 */
}
a:hover {
color: #1976D2;
text-decoration: underline; /* 悬停出现下划线 */
}链接变按钮
css
.btn-link {
display: inline-block;
background: #4CAF50;
color: white;
padding: 12px 28px;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s;
}
.btn-link:hover {
background: #45a049;
}光标样式
css
a { cursor: pointer; } /* 手型 */
.disabled { cursor: not-allowed; } /* 禁止 */
.waiting { cursor: wait; } /* 等待 */
.text { cursor: text; } /* 文字光标 */