how to stable hover effect even after mouse out

how to set my hover effect stable even after mouse out ???
code is working fine but after mouse out div element comes to its
original state ??

html


<div id="sme"></div>

css

#sme{
width: 400px;
height: 400px;
border: 20px solid #06c999;
/* Rotate */
}
#sme:hover{
transition: all 1.9s ease;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

}

Transition must be put in the normal state.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#sme {
width: 400px;
height: 400px;
border: 20px solid #06c999;
transition: all 1.9s ease;
}

#sme:hover {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

<!-- language: lang-html -->

<div id="sme"></div>

<!-- end snippet -->

Edit : Indeed, if you want it to keep the state, i suggest to change #sme:hover by .hovered and add this class in js to your #sme when you hover it.

You must have to use animations and add a class when you `hover` the element like

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

document.getElementById('sme').addEventListener('mouseover', function() {
if (!hasClass(this, 'animated')) {
this.className = 'animated';
}
});

<!-- language: lang-css -->

#sme {
width: 400px;
height: 400px;
border: 20px solid #06c999;
transition-property: transform;
transition-duration: 1.9s;
}

#sme:hover,
.animated {
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

<!-- language: lang-html -->

<div id="sme"></div>

<!-- end snippet -->

I think you are looking for this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(function(){
$('#sme').on('mouseenter', function(){
$(this).addClass('hoverd');
});
});

<!-- language: lang-css -->

#sme {
width: 400px;
height: 400px;
border: 20px solid #06c999;
transition: all 1.9s ease;
}

.hoverd {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

<!-- language: lang-html -->

<div id="sme"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- end snippet -->

Something to consider is to use the animation play state. Side effect however is when you remove the mouse while the animation hasn't finished, the animation will pause.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#sme {
width: 400px;
height: 400px;
border: 20px solid #06c999;
animation: rotatebox 2s ease forwards;
animation-play-state: paused;
}

#sme:hover {
animation-play-state: running;
}

@keyframes rotatebox {
100% {
transform: rotate(180deg);
}
}

<!-- language: lang-html -->

<div id="sme">A</div>

<!-- end snippet -->