Mimic ‘onmouseout’ with CSS3 Transitions

Here’s a crazy and ridiculous tip that probably has limited uses, but illustrates some quirky possibilities with CSS3 transitions. I’ve written something about this before and Chris Coyier explained the basic concept on his site.

But in this quick post I’ll show you how to make an element have a “mouseout” or “mouseleave” transition with no “mouseover” or “mouseenter” transition. Here’s the code:

.mouseout {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  background-color: #bada55;
  -webkit-transition: -webkit-transform 2s linear;
  -moz-transition: -moz-transform 2s linear;
  -o-transition: -o-transform 2s linear;
  transition: transform 2s linear;
}

.mouseout:hover {
  cursor: pointer;
  -webkit-transition: -webkit-transform 0s linear;
  -moz-transition: -moz-transform 0s linear;
  -o-transition: -o-transform 0s linear;
  transition: transform 0s linear;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

And here’s the demo page link:

Notice what happens when you hover on and off. Hovering on seems to have no effect, but then hovering off causes the element to animate a rotation transform.

How Does it Work?

There’s nothing too tricky going on here. Firstly, we take advantage of the fact that you can have different transitions for hovering on, and hovering off. Second, we use a timing of 0s to disguise the hover on.

You’ll notice on hover we’re rotating the box 360 degrees. This doesn’t change the box’s position at all, because 360 degrees means it comes back ‘full circle’ to where it started. But because the transition is taking place over a time of zero seconds, that means it’s instantaneous. So it appears as if there is no transition taking place at all.

Then, when you hover-off, the hover off transition on the element takes place, thus returning the box to its original state — even though it already is in its original state. The hover-off transition takes place over a duration of two seconds, thus making the transition visible and giving the false appearance of a mouseout event occurring without a mouseover event.

Interesting, but probably very limited in possibilities. I really can’t think of any other property that could give the appearance of no hover-on transition. Let me know if you can think of another way to do this with CSS alone.