如何实现鼠标悬停a元素时触发进度条自定义动画效果

你只需要对现有代码做少量调整即可实现需求，具体修改如下：

步骤1：调整基础样式（必改） #

首先补充进度条容器的基础样式，同时取消进度条默认自动播放的动画属性，原有@keyframes pr规则无需修改：

/* 新增进度条容器基础样式 */
.progress {
  height: 6px;
  width: 100%;
  background: #f0f0f0;
}

/* 修改原有.progress-bar样式，移除默认动画 */
.progress-bar {
  height: 100%;
  width: 0;
  background-color: red;
}

步骤2：选择触发逻辑（二选一即可） #

方案A：纯CSS实现（主流浏览器兼容） #

利用CSS :has 伪类实现悬停品牌链接时触发动画，目前Chrome 105+、Edge 105+、Safari 15.4+均原生支持：

/* 新增悬停触发规则 */
.choosebybrand:has(a:hover) + .progress .progress-bar {
  animation: pr 5s infinite;
}

方案B：JS实现（全浏览器兼容） #

如果需要兼容旧版本浏览器，可以添加以下JS代码实现效果，不需要额外修改CSS规则：

// 获取所有品牌链接和进度条元素
const brandLinks = document.querySelectorAll('.choosebybrand a');
const progressBar = document.querySelector('.progress-bar');

// 给每个链接绑定 hover 事件
brandLinks.forEach(link => {
  // 鼠标移入时启动动画
  link.addEventListener('mouseenter', () => {
    progressBar.style.animation = 'pr 5s infinite';
  });
  // 鼠标移出时停止动画并重置进度条
  link.addEventListener('mouseleave', () => {
    progressBar.style.animation = 'none';
    progressBar.style.width = '0';
  });
});

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