当我将鼠标悬停在“a”元素上时，我希望动画能够工作吗？答案

【问题标题】：I want the animation to work when i hover on the "a" element?当我将鼠标悬停在“a”元素上时，我希望动画能够工作吗？
【发布时间】：2021-09-18 13:44:26
【问题描述】：

我使用了引导程序。这是我的代码，我希望当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>

【问题讨论】：

标签： javascript html css bootstrap-4 bootstrap-5

【解决方案1】：

您的进度条需要显示高度。

示例：

/* 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>

【讨论】：

我正在使用引导程序，我也尝试过，但我不知道为什么但它不起作用
我在这里没有看到任何引导类，那么你的真实代码是什么？是这里的 sn-p 不起作用还是你用它做什么？
.progress-bar 是一个 bootsrap 类，我在我的 html 代码的头部使用 bootsrap。
@bleronmexhuani 我在 sn-p 中添加了引导程序，动画在悬停链接时起作用
非常感谢

【解决方案2】：

您应该使用~ 选择器。

a:hover ~ .progress-bar {
  animation: pr 2s infinite;
}

【讨论】：

谢谢，但它不起作用
然后尝试使用+而不是~
它不工作

【解决方案3】：

这是代码更新

<!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>

【讨论】：

进度条在哪里？
好的，项目的动画应该是怎样的？第一个或第二个
当鼠标悬停在 a 元素上时，.progress-bar 类应该开始动画，当悬停消失时，动画应该在开始处重置，直到我再次悬停在 a 元素上
更新代码请检查
为什么？悬停a元素并查看

【解决方案4】：

您不能完全按照问题中的要求使用 CSS 作为锚点，并且 img 元素既不是进度条的父级，也不是兄弟级。 CSS 不允许“向上”然后再次向下。

您可以做的是感知锚点和 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>

注意：sn-p 必须添加高度尺寸才能看到进度条。

【讨论】：

我不知道为什么，但它不起作用:)
这是给我的（虽然我必须向下滚动才能看到小 sn-p 屏幕上的进度条）。您使用的是什么浏览器/操作系统。我已经在 Edge/Chrome Windows10 上测试过。
我正在使用谷歌浏览器。
你在看什么？你试过sn-p整页吗？你在哪里徘徊？
我将鼠标悬停在三星 div 上，在 a 元素上，但动画只是没有开始