可通过合并 :hover 和 :focus 伪类设置统一样式，使元素在鼠标悬停或键盘聚焦时均改变颜色；2. 建议保留或自定义 focus 样式以提升可访问性；3. 结合 transition 可实现平滑视觉效果，增强用户体验。
要让元素在鼠标悬停（:hover）和获得焦点（:focus）时同时改变颜色，可以直接在 CSS 中为这两个伪类设置相同的样式。这样无论用户是用鼠标悬停还是通过键盘（如 Tab 键）聚焦到该元素，颜色都会发生变化。
1. 基本语法：使用 :hover 和 :focus 分别或组合定义
你可以单独写两个规则，也可以将它们合并，避免重复代码：
button:hover,button:focus { color: white; background-color: #007bff;}
上面的写法表示：当 button 处于 hover 状态或 focus 状态时，文字颜色变为白色，背景变为蓝色。
2. 注意焦点样式的可访问性
使用 :focus 对键盘用户非常重要，确保交互对所有人可用。不要移除默认的 outline，如果想自定义，可以用 outline: none 配合其他视觉提示（如边框或阴影）：
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情
立即学习“前端免费学习笔记（深入）”；
input:hover,input:focus { color: #333; background-color: #f0f8ff; outline: none; border: 2px solid #007bff;}
3. 实际应用场景示例
比如一个输入框，在鼠标放上去或点击后都变色：
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同时改变颜色的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1030031.html
微信扫一扫 
支付宝扫一扫 
