那些遇到过的问题

将鼠标悬停在另一个图标中以触发动画效果

Per*_*lis 4 html css jquery css-selectors css3

当我悬停我的时候,我需要在图标中设置CSS动画效果div.

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;
}
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

在行动中这不起作用!

我该怎么办？

DEMO

Har*_*rry 5

CSS中没有以前的兄弟选择器,因此在不更改标记的情况下单独使用纯CSS无法实现所需的效果.

CSS方法:

如果您可以将标记更改为如下所示(基本上移动div图标的容器上方):

<div class="newsline">test</div>
<div class="box-head">
    <i class="fa fa-reorder fa-2x pull-left fa-border animated-div"></i>
</div>
Run Code Online (Sandbox Code Playgroud)

然后你可以使用下面的CSS来悬停动画时触发动画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;
}
Run Code Online (Sandbox Code Playgroud) 

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}
.flipInX {
  -webkit-backface-visibility: visible!important;
  backface-visibility: visible!important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX
}
@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}
/* add this class */

.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;
}
Run Code Online (Sandbox Code Playgroud) 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="newsline">test</div>
<div class="box-head">
  <i class="fa fa-reorder fa-2x pull-left fa-border animated-div"></i>
</div>
Run Code Online (Sandbox Code Playgroud)

选择说明:

.newsline:hover + .box-head > .animated-div
Run Code Online (Sandbox Code Playgroud)
  • 选择元素 class='animated-div'
  • 这是另一个元素的孩子 class='box-head'
  • 这是元素的相邻兄弟 class='animated-div'
  • 当元素class = 'animated-div'正在盘旋时.

jQuery方法:

如果由于某种原因无法修改结构,那么您需要创建一个单独的onhover类,如下所示:

.onhover {
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration:1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
Run Code Online (Sandbox Code Playgroud)

并使用jQuery(或JavaScript)将类添加到.animated-div悬停时.newsline.

$(document).ready(function(){
    $('.newsline').hover(function(){
        $(this).prev('.box-head').children('.animated-div').addClass('onhover');
    }, function(){
        $(this).prev('.box-head').children('.animated-div').removeClass('onhover');
    });
});
Run Code Online (Sandbox Code Playgroud) 

$(document).ready(function(){
    $('.newsline').hover(function(){
        $(this).prev('.box-head').children('.animated-div').addClass('onhover');
    }, function(){
        $(this).prev('.box-head').children('.animated-div').removeClass('onhover');
    });
});
Run Code Online (Sandbox Code Playgroud) 
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}
.flipInX {
  -webkit-backface-visibility: visible!important;
  backface-visibility: visible!important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX
}
@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}
/* add this class */

.onhover {
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.box-head{
  clear: both;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

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

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

<div class="box-head">
  <i class="fa fa-reorder fa-2x pull-left fa-border animated-div"></i>
</div>
<div class="newsline">test3</div>
Run Code Online (Sandbox Code Playgroud)

选择说明:

$(this).prev('.box-head').children('.animated-div')
Run Code Online (Sandbox Code Playgroud)
  • 选择元素 class='animated-div'
  • 这是一个元素的孩子 class='box-head'
  • 这反过来是正在徘徊的元素的前一个兄弟(也就是元素class='newsline')

如果元素与图标的容器(with )之间有任何额外的元素,则使用下面的jQuery选择器.class='newsline'class='box-head'

$(this).prevAll('.box-head:first').children('.animated-div')
Run Code Online (Sandbox Code Playgroud)

我已hover为CSS和jQuery的方法,但可以适用于其他的伪选择喜欢同样的样本active,focus也.

归档时间：

查看次数：

1161 次

最近记录：

9 年，9 月 前
相关归档
以HTML格式显示HTML代码 191
CSS本机变量不适用于媒体查询 95
"text-align:justify;" 内联块元素是否正确？ 50
如何编写"if not class"jQuery选择器？ 35
模拟背景大小:在画布上覆盖 35
base64没有在gmail中解码 27
从textarea保存多行文本 6
网格形状图标 2
链接点击后出现虚线边框 2
水平CSS向导导航 1
难疑归档
如何循环或枚举JavaScript对象？ 2704
如何在不重新加载页面的情况下修改URL？ 2221
如何在Python中复制文件？ 2171
**(双星/星号)和*(星号/星号)对参数有什么作用？ 2149
在JavaScript中定义枚举的首选语法是什么？ 1982
HTML中id属性的有效值是什么？ 1945
在JavaScript中将字符串转换为整数？ 1603
如何修复java.lang.UnsupportedClassVersionError:不支持的major.minor版本 1532
StringBuilder和StringBuffer之间的区别 1510
让Chrome接受自签名的localhost证书 1080