避免 标签颜色变化：优化可访问性和用户体验216

使用 CSS 伪类，例如 :hover 和 :focus，可以指定链接在悬停或获得焦点时的状态。通过设置颜色属性为 inherit，可以保持链接的颜色与周围文本相同。a {
color: black;
}
a:hover, a:focus {
color: inherit;
}

2. 使用 JavaScript

可以使用 JavaScript 在链接上添加 hover 和 focus 事件监听器，以在触发事件时动态更新链接的颜色。const links = ('a');
((link) => {
('hover', () => {
= 'inherit';
});
('focus', () => {
= 'inherit';
});
});

3. 使用 CSS 自定义属性

CSS 自定义属性（也称为 CSS 变量）允许在样式表中创建和存储可重用值。可以通过将自定义属性分配给链接颜色，并在悬停或获得焦点时覆盖该属性，从而防止颜色变化。:root {
--link-color: black;
}
a {
color: var(--link-color);
}
a:hover, a:focus {
--link-color: inherit;
}

4. 使用预处理器