hover without returning to normal state

Question

I have a question on the :hover state. Can I stop my transition from turning back to the original state after stopping the mouseover.

div {
  width:100px;
  height:100px;
  background:red;
  margin: 150px;
  -webkit-transition:all 1s; 
}

div:hover {
  border-radius:50%;
  -webkit-transform:rotate(1440deg);
}

Fiddle

That is what I have, but I don't know what to add to stop the whole thing in circle-state. I just want the :hover pseudo-class to start it.

It's not that hard to make one yourself. He's lazy, don't be one yourself. http://jsfiddle.net/U3nw4/ — Madara's Ghost, Jun 08 '14 at 09:27
refer here http://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering — Anju Aravind, Jun 08 '14 at 09:28
you cannot do it with `:hover`, the state will be turned back if it's not `:hover`. Using script instead. — King King, Jun 08 '14 at 09:29
@KingKing he doesn't want the element to revert back to square. He wants to keep it in circle after it was hovered once. — Madara's Ghost, Jun 08 '14 at 09:30
@SecondRikudo I mistyped **can** while it should be **cannot**. Hence I said ***using script instead***. — King King, Jun 08 '14 at 09:30

score 1 · Accepted Answer · answered Jun 08 '14 at 09:29

You'll need to use JavaScript. Add a class on hover, and set the CSS rules as follows:

element {
    transition: ....;
    old: state;
}

element.hovered-once {
    news: state;
}

The transition will activate when the class get applied, and just don't remove the class when mouse is out.

hover without returning to normal state

1 Answers1