javascript - 悬停在一个触发效果的 div 悬停在另一个

Question

我有一个问题:我有一个效果悬停在一个 div 中，但我想在光标悬停在另一个 div 时触发效果。像这样的东西:

<div id='mouse-hover-in-this-div'>
    blablabla
    <div id='should-trigger-mouse-hover-in-this-div'></div>
</div>

我在这里看到了一些解决方案，但它们没有用。特别是我尝试使用 jquery .css 方法更改内部 div 的 css 属性，但我没有成功提供以下选项:

-webkit-transform: translateY(16px);
transform: translateY(16px);
-webkit-animation-name: hang;
animation-name: hang;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;

我想设置的悬停来自库 hover.css，我只是想在整个 div 悬停时触发箭头的弹跳效果，而不仅仅是小箭头。我的问题有解决方案吗？

Answer 1

Demo

#outside-box:hover .animated-div {
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  -webkit-animation-name: hang;
  animation-name: hang;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}