可通过合并 :hover 和 :focus 伪类设置统一样式，使元素在鼠标悬停或键盘聚焦时均改变颜色；2. 建议保留或自定义 focus 样式以提升可访问性；3. 结合 transition 可实现平滑视觉效果，增强用户体验。
要让元素在鼠标悬停（:hover）和获得焦点（:focus）时同时改变颜色，可以直接在 CSS 中为这两个伪类设置相同的样式。这样无论用户是用鼠标悬停还是通过键盘（如 Tab 键）聚焦到该元素，颜色都会发生变化。
你可以单独写两个规则，也可以将它们合并，避免重复代码：
button:hover,
button:focus {
color: white;
background-color: #007bff;
}
上面的写法表示：当 button 处于 hover 状态或 focus 状态时，文字颜色变为白色，背景变为蓝色。
使用 :focus 对键盘用户非常重要，确保交互对所有人可用。不要移除默认的 outline，如果想自定义，可以用 outline: none 配合其他视觉提示（如边框或阴影）：
立即学习“前端免费学习笔记（深入）”；
input:hover,
input:focus {
color: #333;
background-color: #f0f8ff;
outline: none;
border: 2px solid #007bff;
}
比如一个输入框，在鼠标放上去或点击后都变色：
input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
transition: all 0.3s ease;
}
input[type="text"]:hover,
input[type="text"]:focus {
background-color: #e6f7ff;
border-color: #40a9ff;
color: #000;
}
加入 transition 可使颜色变化更平滑，提升用户体验。
基本上就这些，合理使用 :hover 和 :focus 能让界面更友好，尤其兼顾鼠标和键盘操作。以上就是如何用css hover和focus同时改变颜色的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
161
收藏
