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

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

2 个答案: