javascript - JS to keep css selector hover state on - css animation, 已经尝试了多个答案但没有成功

Question

所以我已经通过堆栈溢出的多个答案，但由于我没有 的 JS 经验，所以我在这里寻求一些直接的帮助来解决我的问题。我想保持 :hover 状态处于事件状态，即使我的鼠标离开了触发 :hover 的元素区域。

目前我有一个使用 css 的动画，它是使用 :hover 选择器触发的，现在我在提供的其他答案中遇到的问题我认为是因为悬停是在一个元素上触发的，而另一个元素是动画的。

下面是我的css和html，

CSS

#offerblock4:hover+#rotategiggles {
    animation: animationFrames9 linear 0.5s;
    animation-iteration-count: 1;
    transform-origin: 100% 100%;
    animation-fill-mode: forwards;
    /*when the spec is finished*/
    -webkit-animation: animationFrames9 linear 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 100% 100%;
    -webkit-animation-fill-mode: forwards;
    /*Chrome 16+, Safari 4+*/
    -moz-animation: animationFrames9 linear 0.5s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 100% 100%;
    -moz-animation-fill-mode: forwards;
    /*FF 5+*/
    -o-animation: animationFrames9 linear 0.5s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 100% 100%;
    -o-animation-fill-mode: forwards;
    /*Not implemented yet*/
    -ms-animation: animationFrames9 linear 0.5s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 100% 100%;
    -ms-animation-fill-mode: forwards;
    /*IE 10+*/
}
@keyframes animationFrames9 {
    0% {
        transform: translate(1px, 1px) scaleY(NaN);
    }
    100% {
        transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
    }
}
@-moz-keyframes animationFrames9 {
    0% {
        -moz-transform: translate(1px, 1px) scaleY(NaN);
    }
    100% {
        -moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
    }
}
@-webkit-keyframes animationFrames9 {
    0% {
        -webkit-transform: translate(1px, 1px) scaleY(NaN);
    }
    100% {
        -webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
    }
}
@-o-keyframes animationFrames9 {
    0% {
        -o-transform: translate(1px, 1px) scaleY(NaN);
    }
    100% {
        -o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
    }
}
@-ms-keyframes animationFrames9 {
    0% {
        -ms-transform: translate(1px, 1px) scaleY(NaN);
    }
    100% {
        -ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
    }
}

HTML

<div class="row">
<div class="column">

<a id="offerblock4" href="#">
<div class = "offer4 fullpic">

<img src="sm1611_offer4.jpg" style=" position:absolute; z-index:12;"></img> 

</a>

<div id="rotategiggles" style="width:160px; height:auto; padding-left:80px; padding-top:338px;">        
<img src="GIGGLES_1.png"></img>


</div>
</div>

奖励积分 我相信我要求的是非常标准的并且不太难，我希望我自己做，所以我也会通过要求更进一步来挑战每个人并且如果有可能在悬停时触发原始动画的js(或css)然后当鼠标离开元素时触发同一元素上的另一个动画，基本上允许我在鼠标离开时反转动画区域:)

谢谢大家!

JS fiddle :https://jsfiddle.net/sLqf2zbh/

编辑我似乎因指示不当而过于复杂；目前，当 #offerblock4 悬停在制作 #rotategiggles animate 上时，我的动画效果很好。我想做的是包含 JS，这样当鼠标离开 #offerblock4 时，#rotategiggles 会保持它在动画位置的结束位置并且不会缩减到原来的起始位置。

奖励积分请求指的是当鼠标离开#offerblocks4 区域时动画将反转回其原始位置。我不需要 css 动画本身的帮助，所以当鼠标“悬停”时会触发第二个动画 #offerblocks4。

Answer 1

我不知道你在问什么 - 但我认为其中一部分是这样的？

我可以获得多少奖励积分？ (最好很多)

#offerblock4+#rotategiggles {
  animation: animationFrames8 linear 0.5s;
  animation-iteration-count: 1;
  transform-origin: 00 00;
  transform: scale(-1.0, -1.0);
  animation-fill-mode: forwards;
  /*when the spec is finished*/
  -webkit-animation: animationFrames8 linear 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 00 00;
  -webkit-animation-fill-mode: forwards;
  /*Chrome 16+, Safari 4+*/
  -moz-animation: animationFrames8 linear 0.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 0 00;
  -moz-animation-fill-mode: forwards;
  /*FF 5+*/
  -o-animation: animationFrames8 linear 0.5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 100 100;
  -o-animation-fill-mode: forwards;
  /*Not implemented yet*/
  -ms-animation: animationFrames8 linear 0.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 00 0;
  -ms-animation-fill-mode: forwards;
  /*IE 10+*/
}
#offerblock4:hover+#rotategiggles {
  animation: animationFrames9 linear 0.5s;
  animation-iteration-count: 1;
  transform-origin: 00 00;
  animation-fill-mode: forwards;
  /*when the spec is finished*/
  -webkit-animation: animationFrames9 linear 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 00 00;
  -webkit-animation-fill-mode: forwards;
  /*Chrome 16+, Safari 4+*/
  -moz-animation: animationFrames9 linear 0.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 0 00;
  -moz-animation-fill-mode: forwards;
  /*FF 5+*/
  -o-animation: animationFrames9 linear 0.5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 100 100;
  -o-animation-fill-mode: forwards;
  /*Not implemented yet*/
  -ms-animation: animationFrames9 linear 0.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 00 0;
  -ms-animation-fill-mode: forwards;
  /*IE 10+*/
}
@keyframes animationFrames9 {
  0% {
    transform: translate(1px, 1px);
  }
  100% {
    transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
  }
}
@-moz-keyframes animationFrames9 {
  0% {
    -moz-transform: translate(1px, 1px);
  }
  100% {
    -moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
  }
}
@-webkit-keyframes animationFrames9 {
  0% {
    -webkit-transform: translate(1px, 1px);
  }
  100% {
    -webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
  }
}
@-o-keyframes animationFrames9 {
  0% {
    -o-transform: translate(1px, 1px);
  }
  100% {
    -o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
  }
}
@-ms-keyframes animationFrames9 {
  0% {
    -ms-transform: translate(1px, 1px);
  }
  100% {
    -ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
  }
}
@keyframes animationFrames8 {
  100% {
    transform: translate(1px, 1px);
  }
  0% {
    transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
  }
}
@-moz-keyframes animationFrames8 {
  100% {
    -moz-transform: translate(1px, 1px);
  }
  0% {
    -moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
  }
}
@-webkit-keyframes animationFrames8 {
  100% {
    -webkit-transform: translate(1px, 1px);
  }
  0% {
    -webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
  }
}
@-o-keyframes animationFrames8 {
  100% {
    -o-transform: translate(1px, 1px);
  }
  0% {
    -o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
  }
}
@-ms-keyframes animationFrames8 {
  100% {
    -ms-transform: translate(1px, 1px);
  }
  0% {
    -ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00);
  }
}

<div class="row">
  <div class="column">

    <a id="offerblock4" href="#">
      <div class="offer4 fullpic">

        <img src="sm1611_offer4.jpg" style=" position:absolute; z-index:12;"></img>
    </a>

    <div id="rotategiggles" style="width:160px; height:auto; padding-left:80px; padding-top:3px;">
      <img src="GIGGLES_1.png"></img>


    </div>
    </div>