:hover on css through onclick javascript

Question

i just write a code using css and html. Its a beginner rocket animation which flies through transform: translate() rotate(). I used hover to fly the rocket. I want to use javascript onclick (or any other) event to fly the rocket. e.g when i click on lime box rocket animation begin. How can i do that through javascript event.

I also glad to know what i use to explode the rocket when i click on red button? how can i explode it on any stage of animation?

<html>

<head>
<link rel="stylesheet" href="rocket.css" type="text/css">
</head>
<body>
        <div id="box">

            <div id="pic">

            </div>

            <div id="play">

            </div>

            <div id="explode">

            </div>

        </div>

</body>

</html>

css i used

#box{ 
    \\position:fixed; 
    top:0; 
    left:0; 
    width:900px; 
    height:650px;
    background: black; 
} 

#pic{ 
    width: 128px; 
    height: 128px; 
    top:80%; 
    position: relative; 
    \\background: red;
    background-image: url('http://imgur.com/a/xlNpE');
    transition: 3s;
}

#pic:hover {

    width: 128px; 
    height: 128px; 
    top:80%; 
    position: relative; 
    \\background: red;
    background-image: url('http://imgur.com/a/xlNpE');
    transition: 5s;
    transform:translate(750px, -530px) rotate(45deg) ;

}

#play {
    width: 50px;
    height: 50px;
    background:lime;
    float: left;

}
#explode {
    width: 50px;
    height: 50px;
    background:red;
    float: left;

}

https://jsfiddle.net/v1not4hn/

You won't be able to trigger the CSS transforms via JavaScript. You'll have to animate it yourself (or use a library like JQuery UI). — Scott Marcus, Feb 01 '17 at 22:46
Where ever you have the `:hover` pseudo class, use a `.hover` class as well. Then when you toggle the class, it will animate. — evolutionxbox, Feb 01 '17 at 22:49
i am new learner, my teacher assigned this task and i am sure he said use mouse event (javascript) to fly the rocket. Is there any other way i use to fly except hover so that i can use javascript to play animation? — Muhammad Naeem, Feb 01 '17 at 22:49
Welcome to Stack Overflow! Please read [ask]. Key phrase: "Search, and research". There are many tutorials on the internet about triggering animation using JavaScript. — Heretic Monkey, Feb 01 '17 at 22:51
i spend enough days on search already. That's why i ask here if someone help with the code above and write a solution in simple format so that a beginner (like me) can understand. — Muhammad Naeem, Feb 01 '17 at 22:57
Possible duplicate of [Change :hover CSS properties with JavaScript](http://stackoverflow.com/questions/11371550/change-hover-css-properties-with-javascript) — evolutionxbox, Feb 02 '17 at 09:37

score 0 · Accepted Answer · answered Feb 01 '17 at 23:05

Here's a basic working example

The key is to switch your :hover pseudo class to a real one .hover.

Then create a function that will add the hover class to your rocket.

function flyRocket(){
    document.querySelector('#pic').classList.add('hover')
}

Finally, attach the function to your play button via click event.

document.querySelector('#play').addEventListener('click', flyRocket)

document.querySelector('#play').addEventListener('click', flyRocket)

function flyRocket(){
 document.querySelector('#pic').classList.add('hover')
}

#box{ 
 \\position:fixed; 
 top:0; 
 left:0; 
 width:550px; 
 height:450px;
 background: black; 
} 

#pic{ 
 width: 128px; 
 height: 128px; 
 top:80%; 
 position: relative; 
 \\background: red;
 background-image: url('http://i.imgur.com/qrsk6O1.png');
 transition: 3s;
}

#pic.hover {

 width: 128px; 
 height: 128px; 
 top:80%; 
 position: relative; 
 \\background: red;
 background-image: url('http://i.imgur.com/qrsk6O1.png');
 transition: 5s;
 transform:translate(400px, -380px) rotate(45deg) ;

}

#play {
 width: 50px;
 height: 50px;
 background:lime;
 float: left;
 
}

#explode {
 width: 50px;
 height: 50px;
 background:red;
 float: left;
 
}

<div id="box">
    
   <div id="pic">
 
   </div>
 
   <div id="play">
 
   </div>
 
   <div id="explode">
 
   </div>

  </div>

:hover on css through onclick javascript

1 Answers1

Here's a basic working example