将鼠标悬停在一个元素上触发多个CSS动画

Question

I am having issues triggering multiple css hover animations. Currently there are 3 different divs that all need different animations when the main parent div is hovered over with a mouse.

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

I would like the 3 divs (dashBoard, dashCircle, dashTri) to all go through their respective animations/transforms when the main dasHb div is hovered over. Can anybody please help?

Thanks.

Answer 1

Intead use div#dashCircle:hover use .dasHb:hover #dashCircle{} ...

 div#dashBoard{ background: url(https://i.stack.imgur.com/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(https://i.stack.imgur.com/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(https://i.stack.imgur.com/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> 

Answer 2

More your :hover pseudo-class up to the parent .dasHb and then select each child and apply the desired transform.

 .svg { width: 200px; height: 60px; } .red { background: red; } .green { background: green; } .blue { background: blue; } .dasHb:hover .red { transform: rotateZ(-71deg) translate(29rem, 18rem); transition: transform 600ms; } .dasHb:hover .green { transform: translatey(-8rem); transition: all 600ms; } .dasHb:hover .blue { transform: rotateY(-22deg) rotateX(-7deg) rotateZ(3deg); transition: transform 600ms; } 

 <div class="dasHb"> <div class="svg red"></div> <div class="svg green"></div> <div class="svg blue"></div> </div> 

Codepen