Question

我遇到了一个问题，我几乎解决了所有问题，

当我将鼠标悬停在.ball（在表单内部）时，我想停止所有站点（.f_bl，.s_bl，.search，.search_bar）的动画按钮，可以吗？

.search{
   animation: colors_world 15s infinite
}  
.ball , .f_bl , .s_bl , .searchbar{
   animation: colors_world 15s infinite
}  
@keyframes colors {
  7.14%   {background: #E1140A;}
  21.43%  {background: #FF6A00;}
  35.71%  {background: #FEE600;}
  50%  {background: #6AC346;}
  64.27% {background: #46C8E1;}
  78.55% {background: #3E8DDD;}
  92.83% {background: #F04187;}
  116%   {background: #E1140A;}
}

@keyframes colors_world {
    7.14%   {color: #E1140A;}
    21.43%  {color: #FF6A00;}
    35.71%  {color: #FEE600;}
    50%  {color: #6AC346;}
    64.27% {color: #46C8E1;}
    78.55% {color: #3E8DDD;}
    92.83% {color: #F04187;}
    116%   {color: #E1140A;}
}

<div class="logo">
  <div class="ball_cont"></div>
  <div class="ball"></div>
  <div class="f_tr"></div>
  <div class="s_tr"></div>
  <div class="f_bl"></div>
  <div class="s_bl"></div>
</div>

<h1 class="hellosearch"> <span class="hello">hello</span><span class="search">search</span> </h1>

<form action="https://www.google.com/search" method="GET">
  <input autofocus autocomplete="off" type="text" name="q" placeholder="search..." class="bar">
  <input type="submit" value="Pesquisar" class="button_search">
</form>

Answer 1

animation-play-state: paused存在于CSS中，因此我们可以将其添加为一个单独的类，称为.paused。现在，我们只需将鼠标悬停在某个元素上，然后将其添加到所有需要的元素上，然后将其删除，然后在鼠标离开该元素时将其删除。我将下面的示例设置为当您将鼠标悬停在.button_search元素上时。

var btn = document.querySelector('.button_search');
var animatedEls = document.querySelectorAll('.search, .ball , .f_bl , .s_bl , .searchbar');

btn.addEventListener("mouseenter", function() {   
  for(var i = 0; i <= animatedEls.length-1; i++) {
    animatedEls[i].classList.add('paused');
  }
});

btn.addEventListener("mouseleave", function() {   
  for(var i = 0; i <= animatedEls.length-1; i++) {
    animatedEls[i].classList.remove('paused');
  }
});

.search {
   animation: colors_world 15s infinite
}  
.ball , .f_bl , .s_bl , .searchbar{
   animation: colors_world 15s infinite
}

.paused {
  animation-play-state: paused;
}

@keyframes colors {
  7.14%   {background: #E1140A;}
  21.43%  {background: #FF6A00;}
  35.71%  {background: #FEE600;}
  50%  {background: #6AC346;}
  64.27% {background: #46C8E1;}
  78.55% {background: #3E8DDD;}
  92.83% {background: #F04187;}
  116%   {background: #E1140A;}
}

@keyframes colors_world {
    7.14%   {color: #E1140A;}
    21.43%  {color: #FF6A00;}
    35.71%  {color: #FEE600;}
    50%  {color: #6AC346;}
    64.27% {color: #46C8E1;}
    78.55% {color: #3E8DDD;}
    92.83% {color: #F04187;}
    116%   {color: #E1140A;}
}

<div class="logo">
  <div class="ball_cont"></div>
  <div class="ball"></div>
  <div class="f_tr"></div>
  <div class="s_tr"></div>
  <div class="f_bl"></div>
  <div class="s_bl"></div>
</div>

<h1 class="hellosearch"> <span class="hello">hello</span><span class="search">search</span> </h1>

<form action="https://www.google.com/search" method="GET">
  <input autofocus autocomplete="off" type="text" name="q" placeholder="search..." class="bar">
  <input type="submit" value="Pesquisar" class="button_search">
</form>

悬停按钮时如何停止所有站点动画

1 个答案: