Jquery 悬停div可在另一个图标中触发动画效果

当我悬停我的

div

时，我需要在图标中设置CSS动画效果

.newsline:hover + .box-head > .animated-div {
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration:1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

CSS

.animated-div {
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration:1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.newsline:hover .animated-div, .newsline:focus .animated-div, .newsline:active .animated-div {
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration:1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

HTML

<div class="box-head">
    <i class="fa fa-reorder fa-2x pull-left fa-border animated-div"></i>
</div>
</br></br></br>
<div class="newsline">test</div>

测试

在行动上，这是行不通的

我该怎么修理

---

CSS中没有以前的同级选择器，因此如果不更改标记，仅使用纯CSS无法实现所需的效果

CSS方法：

如果您可以将标记更改为以下内容（基本上将

div

移动到图标容器上方）：

@-webkit关键帧flipInX{
0% {
-webkit变换：透视（400px）旋转3d（1,0,0,90度）；
变换：透视（400px）旋转3d（1,0,0,90度）；
-webkit动画计时功能：轻松；
动画计时功能：轻松自如；
不透明度：0
}
40% {
-webkit变换：透视（400px）旋转3d（1,0,0，-20度）；
变换：透视（400px）旋转3d（1,0,0，-20度）；
-webkit动画计时功能：轻松；
动画计时功能：轻松进入
}
60% {
-webkit变换：透视（400px）旋转3d（1,0,0,10度）；
变换：透视（400px）旋转3d（1,0,0,10度）；
不透明度：1
}
80% {
-webkit变换：透视（400px）旋转3d（1,0,0，-5度）；
变换：透视（400px）旋转3d（1,0,0，-5度）
}
100% {
-webkit转换：透视图（400px）；
变换：透视图（400px）
}
}
@关键帧flipInX{
0% {
-webkit变换：透视（400px）旋转3d（1,0,0,90度）；
变换：透视（400px）旋转3d（1,0,0,90度）；
-webkit动画计时功能：轻松；
动画计时功能：轻松自如；
不透明度：0
}
40% {
-webkit变换：透视（400px）旋转3d（1,0,0，-20度）；
变换：透视（400px）旋转3d（1,0,0，-20度）；
-webkit动画计时功能：轻松；
动画计时功能：轻松进入
}
60% {
-webkit变换：透视（400px）旋转3d（1,0,0,10度）；
变换：透视（400px）旋转3d（1,0,0,10度）；
不透明度：1
}
80% {
-webkit变换：透视（400px）旋转3d（1,0,0，-5度）；
变换：透视（400px）旋转3d（1,0,0，-5度）
}
100% {
-webkit转换：透视图（400px）；
变换：透视图（400px）
}
}
flipInX先生{
-webkit背面可见性：可见！重要；
背面可见性：可见！重要；
-webkit动画名称：flipInX；
动画名称：flipInX
}
@-webkit关键帧flipInY{
0% {
-webkit变换：透视（400px）旋转3d（0,1,0,90度）；
变换：透视（400px）旋转3d（0,1,0,90度）；
-webkit动画计时功能：轻松；
动画计时功能：轻松自如；
不透明度：0
}
40% {
-webkit变换：透视（400px）旋转3d（0,1,0，-20度）；
变换：透视（400px）旋转3d（0,1,0，-20度）；
-webkit动画计时功能：轻松；
动画计时功能：轻松进入
}
60% {
-webkit变换：透视（400px）旋转3d（0,1,0,10度）；
变换：透视（400px）旋转3d（0,1,0,10度）；
不透明度：1
}
80% {
-webkit变换：透视（400px）旋转3d（0,1,0，-5度）；
变换：透视（400px）旋转3d（0,1,0，-5度）
}
100% {
-webkit转换：透视图（400px）；
变换：透视图（400px）
}
}
@关键帧翻转{
0% {
-webkit变换：透视（400px）旋转3d（0,1,0,90度）；
变换：透视（400px）旋转3d（0,1,0,90度）；
-webkit动画计时功能：轻松；
动画计时功能：轻松自如；
不透明度：0
}
40% {
-webkit变换：透视（400px）旋转3d（0,1,0，-20度）；
变换：透视（400px）旋转3d（0,1,0，-20度）；
-webkit动画计时功能：轻松；
动画计时功能：轻松进入
}
60% {
-webkit变换：透视（400px）旋转3d（0,1,0,10度）；
变换：透视（400px）旋转3d（0,1,0,10度）；
不透明度：1
}
80% {
-webkit变换：透视（400px）旋转3d（0,1,0，-5度）；
变换：透视（400px）旋转3d（0,1,0，-5度）
}
100% {
-webkit转换：透视图（400px）；
变换：透视图（400px）
}
}
/*添加这个类*/
.newsline:hover+.box head>.animated div{
-webkit动画名称：flipInX；
动画名称：flipInX；
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
}

测试

您希望动画仅在悬停时播放，还是在页面加载时播放？此外，您的CSS选择器与HTML结构不匹配，并且无法单独使用CSS触发对以前兄弟姐妹的效果。@Harry:我只需要在我悬停

DIV

时显示动画图标。您说得对。但是在我的设计中，

test

在

@Perspolis的下面：在这种情况下，您别无选择，只能使用JS或jQuery。CSS无法帮助选择位于DOM中悬停的元素之上的任何元素。我在答案中还添加了一个基于jQuery的示例。做得好。Harry，在我的页面中，我有多个

test

和

，因此您的代码不能用于多个

div

。您的代码如何用于多个

div

@佩斯波利斯：请看一下答案的编辑。

.newsline:hover + .box-head > .animated-div {
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration:1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}