如何为:hover元素添加动画，实现悬停时背景色在五种颜色间切换？

代码调整方案 #

首先修正你现有代码的两处核心问题：

• 选择器语法错误：原写法.background_changer :hover中类名和伪类之间的空格，会让选择器匹配background_changer元素的所有后代节点，完全选不到目标div本身，需要删掉空格修正为.background_changer:hover
• 多色动态切换逻辑无需引入JavaScript，直接通过CSS关键帧动画实现：在悬停状态触发无限循环的换色动画，依次切换五种指定颜色，鼠标移出时动画自动停止，回到元素默认状态。

调整后的完整可运行代码如下：
HTML部分和你现有代码逻辑一致，无需改动：

<div class="background_changer"></div>

修正后的CSS代码：

/* 给空div补充基础尺寸，避免效果不可见 */
.background_changer {
  width: 200px;
  height: 200px;
  /* 鼠标移出时的默认背景，增加过渡让交互更平滑 */
  background-color: #f1f2f6;
  transition: background-color .3s ease;
}

/* 修正后的悬停选择器 */
.background_changer:hover {
  /* 触发循环换色动画，时长可自行调整 */
  animation: switchBg 1.5s infinite linear;
}

/* 定义五种颜色的切换关键帧 */
@keyframes switchBg {
  0% {
    background-color: #ff4757;
  }
  25% {
    background-color: #ffa502;
  }
  50% {
    background-color: #2ed573;
  }
  75% {
    background-color: #1e90ff;
  }
  100% {
    background-color: #a55eea;
  }
}

自定义调整说明 #

• 换色节奏控制：修改animation属性后紧跟的时长数值，数值越小切换速度越快
• 自定义颜色：直接替换@keyframes switchBg内每个阶段的background-color值为需要的色值即可
• 如果不需要鼠标移出时的平滑过渡效果，删掉.background_changer规则内的transition属性即可

内容的提问来源于stack exchange，提问作者Ctrl-C