Question

我正在尝试为孩子们建立一个互动的维基百科网站，我希望我的火车上的轮子和火车上的蒸汽在它们悬停在火车车身上时会移动。我正在尝试使用JQuery或CSS来做到这一点。但它不起作用。当你将鼠标悬停在单个元素上时，我设法将每个图像设置为动画，但是当我们只悬停在火车车身上时，如果我可以移动所有4个元素，那么它看起来会更好。

$(function() {
  $(".stationaryTrain").hover(function() {
    $(".stationary").toggleClass("moveWheels");
    $(".still").toggleClass("move");
  });
});

.stationaryTrain {
  position: absolute;
  top: 40%;
  left: 40%;
  z-index: 1;
}
#trainWheel {
  position: absolute;
  top: 46%;
  left: 40.5%;
  z-index: 2;
}
#trainWheel2 {
  position: absolute;
  top: 46%;
  left: 47%;
  z-index: 2;
}
.moveWheels {
  -moz-animation: .6s rotateRight infinite linear;
  -webkit-animation: .6s rotateRight infinite linear;
  -webkit-transition: all 2s ease;
}
@-webkit-keyframes rotateRight {
  0% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
#steam1 {
  position: absolute;
  top: 38%;
  left: 48%;
  z-index: 2;
  -webkit-transition: margin 3s ease;
  -moz-transition: margin 3s ease;
  -o-transition: margin 3s ease;
  -ms-transition: margin 3s ease;
  transition: margin 3s ease;
}
#steam2 {
  position: absolute;
  top: 35%;
  left: 48.5%;
  z-index: 2;
  -webkit-transition: margin 3s ease;
  -moz-transition: margin 3s ease;
  -o-transition: margin 3s ease;
  -ms-transition: margin 3s ease;
  transition: margin 3s ease;
}
.move {
  margin-top: -50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="trainCont">
  <img src="images/trainBody.jpg" alt="trnBdy" id="trainBody" style="width:10%;height:7%;" class="stationaryTrain">
</div>

<div id="trainWhlCont">
  <img src="images/wheel.jpg" alt="trnWhl" id="trainWheel" style="width:2.5%;height:2.5%;" class="stationary">
</div>

<div id="trainWhlCont2">
  <img src="images/wheel.jpg" alt="trnWhl" id="trainWheel2" style="width:2.5%;height:2.5%;" class="stationary">
</div>

<div id="steam1Cont">
  <img src="images/smoke1.jpg" alt="steam1" id="steam1" style="width:2%;height:3%;" class="still">
</div>

<div id="steam2Cont">
  <img src="images/smoke3.jpg" alt="steam1" id="steam2" style="width:2%;height:3%;" class="still">
</div>

一旦我开始工作，我也希望在悬停时添加蒸汽火车的声音。任何有关这方面的帮助将不胜感激。我确定我在某个地方犯了一个小错误，但我无法在任何地方找到它

以下是JFiddle的现状：https://jsfiddle.net/mikehene/gtvbp0wy/

Answer 1

当父元素像这样悬停时，你可以调用内部元素的动画：

.stationaryTrain:hover .stationary{
    -moz-animation:.6s rotateRight infinite linear; 
    -webkit-animation:.6s rotateRight infinite linear; 
    -webkit-transition: all 2s ease;
}

为他们每个人做这件事，例如：

.stationaryTrain:hover .still{
    margin-top: -50px;
}

在悬停时动画其他元素

1 个答案: