CODEWITHSUNDEEP
jqueryhtmlcss
Michael Heneghan
Michael Heneghan

Reputation: 307

Animating other elements on hover

I'm trying to build an interactive wikipedia website for children and I want the wheels on my train and the steam from the train move when they hover over the train body. I'm trying to do this using JQuery or CSS. But it's not working. I managed to get each image to animate when you hover over the individual element, using CSS but it would look much better if I could have all 4 elements move when they hover over the train body only. 

$(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>

Once I have this working i am also hoping to add in sounds of a steam train on hover. Any help on this would be greatly appreciated. I'm sure I'm making a minor error somewhere but I can't find it anywhere

Here is a JFiddle of how it is now: https://jsfiddle.net/mikehene/gtvbp0wy/

Upvotes: 0

Views: 118

Answers (1)

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

You can call the animation of the inner elements when their parent is hovered like this:

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

Do that for each of them, for ex.:

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

Upvotes: 1

Related Questions