如何实现hover a或img元素时Bootstrap进度条动画启动、鼠标移开时停止？

由于你的.samsung容器和.progress容器是同级兄弟元素，用CSS兄弟选择器即可实现触发逻辑，无需额外编写脚本，修改你的CSS代码如下：

.progress-bar {
  animation: pr 2s infinite;
  /* 默认状态下暂停动画 */
  animation-play-state: paused;
}
/* 悬停.samsung容器时，触发后续兄弟节点.progress内的进度条动画运行 */
.samsung:hover ~ .progress .progress-bar {
  animation-play-state: running;
}

@keyframes pr {
  0% {
    width: 0;
    color: red;
  }
  10% {
    background-color: blue;
  }
  20% {
    background-color: black;
  }
  30% {
    background-color: yellow;
  }
  40% {
    background-color: tomato;
  }
  50% {
    width: 100%;
    background-color: violet;
  }
  60% {
    background-color: rgb(184, 145, 145);
  }
  70% {
    background-color: white;
  }
  80% {
    background-color: rgb(0, 255, 234);
  }
  100% {
    width: 0;
    background-color: red;
  }
}

修改完成后，只要鼠标悬停在.samsung容器内的任意元素（包括你要求的a标签、img元素以及h3标题），进度条就会自动播放动画，鼠标移出后动画就会停止。
另外你当前贴出的HTML代码缺失了.progress和.choosebybrand对应的两个闭合</div>标签，使用前请补全避免样式异常。

如果后续你的HTML结构有调整，CSS兄弟选择器无法命中目标，可以用JS手动控制动画状态，代码如下：

// 获取触发元素和进度条元素
const triggerElement = document.querySelector('.samsung .buki');
const progressBar = document.querySelector('.progress-bar');

// 鼠标移入时启动动画
triggerElement.addEventListener('mouseover', () => {
  progressBar.style.animationPlayState = 'running';
})

// 鼠标移出时暂停动画
triggerElement.addEventListener('mouseleave', () => {
  progressBar.style.animationPlayState = 'paused';
})

如果页面有多个同类型品牌区块，把选择器换成querySelectorAll遍历绑定事件即可。

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