將鼠標懸停在一個元素上觸發多個CSS動畫

Question

我在觸發多個CSS懸停動畫時遇到問題。 當前，當主父div用鼠標懸停時，有3種不同的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(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

更多:hover偽類，直到父.dasHb ，然后選擇每個子對象並應用所需的轉換。

 .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