CSS怎么解决点击按钮后重新移入hover效果丢失的问题

核心原因 #

该问题由CSS伪类优先级冲突导致：按钮点击后会持续处于:focus状态，若你设置的:focus/:active伪类样式优先级高于:hover，再次hover时样式会被已触发的焦点样式覆盖，看起来就是hover效果丢失。

修复方法 #

• 调整伪类书写顺序
  CSS中后定义的同权重样式会覆盖之前的样式，按钮相关伪类正确书写顺序如下，确保hover在focus之后即可：

/* button元素顺序参考 */
.btn {
  /* 基础样式 */
}
.btn:disabled {
  /* 禁用态样式 */
}
.btn:focus {
  /* 焦点态样式 */
}
.btn:hover {
  /*  hover样式，写在focus后可覆盖焦点样式 */
}
.btn:active {
  /* 点击态样式 */
}
/* a标签模拟按钮额外加visited在最前面 */
.btn:visited {
  /* 访问后样式 */
}

• 用:focus-visible替代:focus做焦点样式
  如果仅需要键盘导航时显示焦点样式，不需要鼠标点击后保留焦点态，可按如下配置，点击按钮后会自动失去焦点样式，不会覆盖hover效果：

.btn:focus {
  outline: none;
}
/* 仅键盘操作触发按钮时才显示焦点样式 */
.btn:focus-visible {
  outline: 2px solid #91caff;
  outline-offset: 2px;
}

• 提升hover样式优先级
  如果不想调整现有伪类顺序，可以通过叠加选择器的方式提升hover样式优先级，极端场景可加!important（不推荐，仅作为兜底方案）：

/* 叠加标签选择器提升权重 */
button.btn:hover {
  background: #1677ff;
}
/* 兜底方案 */
.btn:hover {
  background: #1677ff !important;
}

内容的提问来源于stack exchange，提问作者the263Coder