我使用了引导程序。这是我的代码，我希望当mouseover是img或a元素时，当mouseleave动画停止时，动画也能工作。
.progress-bar {
animation: pr 2s infinite;
}
@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;
}
}<div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand">
<div class="samsung">
<a href="samsung.html" class="buki">
<div class="frontimage">
<img src="images/samsung.png" height="232px" width="115px" alt="">
</div>
<h3>Samsung</h3>
</a>
</div>
<div class="progress">
<div class="progress-bar"></div>
</div>您的进度条需要显示高度。
示例：
/* do you need the progressbar to be as wide as the picture box ?*/
/* if yes, uncomment below selector & rule */
/* .choosebybrand {
display:inline-block;
}*/
.choosebybrand:hover ~ .progress .progress-bar {
animation: pr 2s infinite;
height: 1em;
}
@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;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand">
<div class="samsung">
<a href="samsung.html" class="buki">
<div class="frontimage">
<img src="https://dummyimage.com/150x100&text=samsung" alt="">
</div>
<h3>Samsung</h3>
</a>
</div>
</div>
<div class="progress">
<div class="progress-bar"></div>
</div>您应该使用~选择器。
a:hover ~ .progress-bar {
animation: pr 2s infinite;
}
这是代码UPDATED
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@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;
}
}
.hover-box .progress .progress-bar {
height: 20px;
width: 100%;
}
.hover-box .content:hover + .progress .progress-bar {
background: red;
animation: pr 2s infinite;
}
</style>
</head>
<body>
<div class="hover-box">
<div class="content">
<a href="#!">Hover me</a>
</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</body>
</html>仅使用CSS作为锚点无法完全按照问题中的要求执行操作，img元素既不是进度条的父元素，也不是兄弟元素。CSS不允许先向上，然后再向下。
你可以做的是感觉到悬停在锚点和img元素的祖先元素上，img元素也是进度元素的兄弟元素，然后在进度条上播放动画。
.samsung {
display: inline-block;
}
.samsung:hover~.progress .progress-bar {
animation: pr 2s infinite;
}
.progress {
width: 100vw;
}
.progress-bar {
height: 2px;
width: 100vw;
background-color: magenta; /* added so something is seen when no hover */
}
@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;
}
}<div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand">
<div class="samsung">
<a href="samsung.html" class="buki">
<div class="frontimage">
<img src="images/samsung.png" height="232px" width="115px" alt="">
</div>
<h3>Samsung</h3>
</a>
</div>
<div class="progress">
<div class="progress-bar"></div>
</div>注意：这个片段必须添加高度维度，这样才能看到进度条。