悬停在一个div中，触发效果悬停在另一个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

演示

#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;
}

Answer 2

对于html

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

你可以有类似的css

#mouse-hover-in-this-div:hover #should-trigger-mouse-hover-in-this-div{
 //HOver Css here 
}

看到一把正在工作的小提琴http://jsfiddle.net/jdksbg51/

Answer 3

如果你想要一个保镖效果，你需要添加jQueryUI效果以及jQuery库

Answer 4

使用jQuery

$('#mouse-hover-in-this-div').hover(function(e) {
$('#should-trigger-mouse-hover-in-this-div').trigger(e.type);
});

演示FIDDLE

Answer 5

这是基于你的小提琴http://jsfiddle.net/a0xx6kqa/4/

当您将鼠标悬停在父元素上时，它将搜索带有class.animateddiv的子元素，并且无论父元素中有多少其他元素，它都将为该div设置动画：）

.animated-div {
    display: inline-block;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#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;
}

只需添加#out-box:hover.animateddiv，您可以在其中调用动画，而不是类的其余部分

.animateddiv:hover、.animedddiv:focus、.animeddiv:active｛｝应该只是#outside box:hover

当您将鼠标悬停在#outside-boxdiv上时，可以通过使用CSS子代选择器来选择#inner-div来实现这一点。

JSFiddle-演示

HTML:

<div id='outside-box'>this is some text
    <div id="another-div">
        <div id='inner-div' class='animated-div'>-></div>
    </div>
</div>

CSS:

#another-div {
    display: inline-block;
}
.animated-div {
    display: inline-block;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#outside-box:hover .animated-div, #outside-box:focus .animated-div, #outside-box:active .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;
}