在网页交互样式开发中，hover和focus是两个常用的CSS伪类，分别对应鼠标悬停和元素获得焦点的状态。很多时候我们需要让元素在两种状态下呈现相同的颜色变化，比如按钮在鼠标悬停和键盘聚焦时都显示高亮颜色，这样能提升不同操作方式下的交互一致性。
hover和focus伪类的基础用法
hover伪类在用户将鼠标指针悬停在元素上时触发，适用于所有可交互元素；focus伪类在元素获得焦点时触发，通常适用于输入框、按钮、链接等可通过键盘Tab键聚焦的元素。
单独使用hover改变颜色的示例代码如下：
/* 单独设置hover状态颜色 */
.btn {
background-color: #f0f0f0;
color: #333;
padding: 8px 16px;
border: 1px solid #ccc;
transition: all 0.2s;
}
.btn:hover {
background-color: #409eff;
color: #fff;
}
单独使用focus改变颜色的示例代码如下：
/* 单独设置focus状态颜色 */
.input-box {
width: 200px;
height: 32px;
border: 1px solid #ccc;
padding: 0 8px;
transition: border-color 0.2s;
}
.input-box:focus {
border-color: #409eff;
outline: none;
}
同时设置hover和focus改变颜色的方法
要让元素在hover和focus状态下同时改变颜色，只需要把两个伪类用逗号分隔，写在同一个规则块中即可，这样两个状态会共享相同的样式属性。
基础组合写法
针对按钮元素同时设置两种状态的颜色变化，代码如下：
/* hover和focus同时生效的样式 */
.common-btn {
background-color: #f0f0f0;
color: #333;
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
/* 逗号分隔两个伪类，共享样式 */
.common-btn:hover,
.common-btn:focus {
background-color: #409eff;
color: #fff;
border-color: #409eff;
outline: none;
}
输入框场景的应用
输入框通常需要同时处理悬停和聚焦的边框颜色变化，代码如下：
/* 输入框基础样式 */
.text-input {
width: 240px;
height: 36px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 12px;
font-size: 14px;
transition: border-color 0.2s;
}
/* 同时设置hover和focus的边框颜色 */
.text-input:hover,
.text-input:focus {
border-color: #409eff;
}
/* 去除focus默认outline */
.text-input:focus {
outline: none;
}
注意事项
- 如果只需要部分属性共享，也可以分别写两个伪类的规则，把公共属性提取到组合规则中，差异化属性单独写。
- 使用transition属性可以让颜色变化更平滑，提升视觉体验。
- 对于focus状态，建议不要完全去除outline，可自定义outline样式，避免影响键盘用户的操作感知。
- 如果元素默认没有focus状态，需要先设置tabindex属性，比如<div tabindex="0">可聚焦元素</div>，才能让focus伪类生效。
常见问题解答
为什么设置了focus样式没有生效？
首先检查元素是否支持聚焦，比如div元素默认无法获得焦点，需要添加tabindex属性。其次检查是否有其他更高优先级的CSS规则覆盖了focus样式，可以通过浏览器开发者工具查看样式优先级。
可以同时设置更多伪类吗？
可以，比如同时设置hover、focus、active三种状态，只需要用逗号分隔多个伪类即可，写法为.element:hover,.element:focus,.element:active { 样式 }。
需要注意的是，伪类的顺序不会影响组合写法的效果，但是单独写的时候建议按照link、visited、hover、focus、active的顺序排列，避免样式被覆盖。