悬停在一个触发效果的 div 中悬停在另一个答案

【问题标题】：hover in one div that trigger the effect hover in another悬停在一个触发效果的 div 中悬停在另一个
【发布时间】：2014-10-04 10:37:31
【问题描述】：

我有一个问题：我有一个效果悬停在一个 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 悬停时触发箭头的反弹效果，而不仅仅是小箭头。我的问题有解决方案吗？

【问题讨论】：

你能做 JSFiddle 吗？
你可以使用css #mouse-hover-in-this-div:hover #should-trigger-mouse-hover-in-this-div { ..... }
试试这个 - jsfiddle.net/7a0e3cfw
这是我的小提琴：我想要达到的结果是将光标悬停在句子“this is some text”上触发效果悬停在箭头上：jsfiddle.net/a0xx6kqa

标签： javascript jquery html css hover

【解决方案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;
}

【讨论】：

【解决方案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/

【讨论】：

这确实有效，但我在内部 div 之前有多个 div。看看这个小提琴：jsfiddle.net/a0xx6kqa/2 在这种情况下，这个解决方案不再起作用。对不起，我忘了首先提到...
假设你有 parent -> child -> subchild，你可以给出你想要悬停的任何类的 id，并且你想更改 subchild 的 css，然后只需执行 #parent:hover #sub -child-id{}

【解决方案3】：

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

【讨论】：

【解决方案4】：

使用 jQuery

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

DEMO FIDDLE

【讨论】：

【解决方案5】：

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

当您将鼠标悬停在父元素上时，它将搜索具有类 .animated-div 的子元素，并且无论您在父元素中有多少其他元素，都会为该 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;
}

只需添加#outside-box:hover .animated-div 来调用动画而不是其他类

.animated-div:hover, .animated-div:focus, .animated-div:active {} 应该只是 #outside-box:hover .animated-div {}

【讨论】：

【解决方案6】：

当您将鼠标悬停在 #outside-box div 上时，您可以使用 CSS descendant selectors 选择 #inner-div 来实现此目的。

JSFiddle - DEMO

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

【讨论】：