HTML中单个元素能否使用多个:hover效果？如何实现按钮悬停彩虹背景循环过渡？

核心疑问解答 #

• 首先CSS语法允许给同一个HTML元素写多条:hover选择器，匹配的所有规则内的属性会自动合并生效，但CSS不存在hover1、hover2这类分级调用的悬停选择器，你要的效果不需要用到多条:hover规则，单条规则触发CSS动画即可实现。
• transition仅支持单次的状态切换，要实现循环播放的动态效果需要用@keyframes定义关键帧动画。

实现思路 #

要实现悬停时的彩虹渐变循环流动效果，不需要频繁切换渐变的色值，只需要做以下设置：

• 给按钮设置宽度远大于元素本身的长条状彩虹渐变背景
• 定义关键帧动画，通过修改background-position让背景横向滚动，产生渐变流动的视觉效果
• 悬停时给元素绑定动画，设置infinite属性即可无限循环播放

可直接复用的代码示例 #

HTML结构 #

<button class="rainbow-hover-btn">悬停查看效果</button>

CSS样式 #

.rainbow-hover-btn {
  padding: 10px 25px;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  /* 设置600%宽度的彩虹渐变背景，覆盖完整的彩虹色段 */
  background: linear-gradient(90deg, #f00, #f90, #ff0, #0f0, #00f, #90f, #f0f);
  background-size: 600% 100%;
  transition: all 0.2s ease;
}

/* 单条:hover规则触发所有悬停效果 */
.rainbow-hover-btn:hover {
  /* 动画配置：动画名 时长 匀速运动 无限循环 */
  animation: rainbow-scroll 2.5s linear infinite;
  /* 可在此处添加其他悬停效果，比如缩放、阴影等，无需额外写:hover规则 */
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 定义背景滚动的关键帧 */
@keyframes rainbow-scroll {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 100% center;
  }
}

参数调整说明 #

• 要修改动画速度：调整2.5s的数值，数值越小动画越快
• 要修改彩虹配色：直接替换linear-gradient内的色值即可
• 要修改动画运动方向：调整background-position的x轴/y轴参数即可实现不同方向的流动效果

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