Use transition with hover without it reverting to previous state - html

Question

I have a div 'box' which rotates 90 degrees when the user hovers it.
When the user moves the mouse away the box counter rotates back to its original position.
I would like to prevent this.
I.E: When the user hover over the box it rotates and stays that way, even when he removes the mouse from the box.
Please look at for the basic setup:
.box {
height: 150px;
width: 150px;
background-color: blue;
transition: 1s all;
}
.box:hover {
transform: rotate(90deg);
}
<div class="box">
Hover me!
</div>
JSFIDDLE
What should I change in order to make it act as I want?

Answer 1

One way you can achieve this using animation
Like this
.box {
height: 150px;
width: 150px;
background-color: grey;
transition: 1s all;
animation: rotate .4s forwards paused;
}
.box:hover {
animation-play-state: running;
}
#keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(90deg);
}
}
<div class="box">
Hover me!
</div>
Or
You can use js. Like this
$(document).ready(function() {
$(".box").mouseover(function(e) {
$(this).css("transform","rotate(90deg)");
});
});
.box {
height: 150px;
width: 150px;
background-color: grey;
transition: 1s all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
Hover me!
</div>