如何解决元素的动画在用 div
HTML: 加载时的主要动画,cards:hover 上的动画也可以在没有 .div insidecard 的情况下工作。 我需要这个 .insidecard 来包装元素,以确保最后一张卡片不会转到下一行并保持响应。
<div class="cards">
<div class="showcards">Show Cards</div>
<div class="insidecard">
<img class="insidecard01" src="img/cards/01.jpg">
<img class="insidecard02" src="img/cards/03.jpg">
<img class="insidecard03" src="img/cards/02.jpg">
</div>
</div>
这是 CSS。动画关键帧很好,所以我想不需要展示它们。
.cards {
overflow: hidden;
}
.insidecard {
width: 600px;
display: block;
}
.cards:hover > .insidecard02 {
animation: cardsout02 0.6s linear;
}
.cards:hover > .insidecard03 {
-webkit-animation: cardsout03 0.6s linear;
}
解决方法
由于结构改变,现在你的图像元素不再是 .cards
的子元素,所以像这样改变 CSS
.cards:hover .insidecard02 {
animation: cardsout02 0.6s linear;
}
.cards:hover .insidecard03 {
-webkit-animation: cardsout03 0.6s linear;
}
移除子组合符 >
你的 CSS 应该是这样的
.cards:hover > .insidecard > .insidecard02{
// Your animation here
}
它正在选择它的子级 insidecard 和一个子级 insidecard02。 > 仅用于选择父级的子级,而不是其子级的子级。
您可以在此处阅读更多内容CSS Selector
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。