html - 悬停在一个元素上触发多个 CSS 动画

Question

我在触发多个 css 悬停动画时遇到问题。目前有 3 个不同的 div，当鼠标悬停在主父 div 上时，它们都需要不同的动画。

<div class="col-lg-7 dasHb">
   <div id="dashBoard"></div>
   <div id="dashCircle"></div>
   <div id="dashTri"></div>
 </div>

div#dashBoard{
background: url(../img/homepage_dashboard_image.svg) no-repeat;
background-size: contain;
height: 93.4rem;
width: 100%;
position: absolute;
left: -2rem;
top: -4rem;
}
div#dashBoard:hover{
transform: rotateY(-22deg) rotateX(-7deg) rotateZ(3deg);
transition: all 600ms;
}

div#dashCircle{
background: url(../img/graphic_circle_purple.svg) no-repeat;
background-size: contain;
height: 7.4rem;
width: 17%;
position: absolute;
left: -2rem;
top: 4rem;
z-index: -3;
}
div#dashCircle:hover{
top: -8rem;
transition: all 600ms;
}

div#dashTri{
background: url(../img/graphic_triangle.svg) no-repeat;
background-size: contain;
height: 6.4rem;
width: 17%;
position: absolute;
z-index: -3;
top: 17rem;
left: 30rem;
transform: rotateZ(39deg);
}
div#dashTri:hover{
transform: rotateZ(-71deg);
transition: all 600ms;
top: 18rem;
left: 29rem;}

当悬停在主 dasHb div 上时，我希望 3 个 div(dashBoard、dashCircle、dashTri)都经过各自的动画/变换。有人可以帮忙吗？

谢谢。

Answer 1

改为使用 div#dashCircle:hover 使用 .dasHb:hover #dashCircle{} ...

div#dashBoard{
background: url(/image/3mG2d.jpg) no-repeat;
background-size: contain;
height: 93.4rem;
width: 100%;
position: absolute;
left: -2rem;
top: -4rem;
}
.dasHb:hover #dashBoard{
transform: rotateY(-22deg) rotateX(-7deg) rotateZ(3deg);
transition: all 600ms;
}

div#dashCircle{
background: url(/image/3mG2d.jpg) no-repeat;
background-size: contain;
height: 7.4rem;
width: 17%;
position: absolute;
left: -2rem;
top: 4rem;
z-index: -3;
}
.dasHb:hover #dashCircle{
top: -8rem;
transition: all 600ms;
}

div#dashTri{
background: url(/image/3mG2d.jpg) no-repeat;
background-size: contain;
height: 6.4rem;
width: 17%;
position: absolute;
z-index: -3;
top: 17rem;
left: 30rem;
transform: rotateZ(39deg);
}
.dasHb:hover #dashTri{
transform: rotateZ(-71deg);
transition: all 600ms;
top: 18rem;
left: 29rem;}

<div class="col-lg-7 dasHb">
   <div id="dashBoard">dashBoard</div>
   <div id="dashCircle">dashCircle</div>
   <div id="dashTri">dashTri</div>
 </div>