Mouse Events in CSS

CSS transitions give us the awesome ability to implement simple animations without JavaScript. However, since there’s really not much talk about it in CSS, you would think that differing your mouse over and mouse out effects would still be something squarely in the realm of JavaScript. After all, there’s no support for something like this:

However, it turns out you can in fact effectively control these two different variables. It’s simply not a very intuitive process. Let’s take a look at how it works.

If you want to skip the discussion and go straight to the syntax, CSS Tricks has a good example of this technique.

The Normal Syntax: Mouse In and Out Are Equal

screenshot

There are a few different ways that we can go about applying a CSS transition. The first one we’ll look at is the plain old default, meaning we’ll use the standard syntax that you’ll find if you run a Google search for how to implement a CSS transition.

For experimentation purposes, we’ll keep the demo simple. We want the transition to animate the shift from a black square to a gray circle. Here’s how this looks (browser prefixes omitted for cleanliness):

The behavior of this animation is typical. When you hover over the black square, in the course of one second it spins around as it increases its border radius to 100px and changes its color, making it a gray circle. Then when you take your mouse out, the opposite happens. The square spins counter clockwise back to its original position has its border radius steadily decreases and its color goes back to black.

Demo: Click here to see this example in action.

Reversed Syntax: No Mouse Out Transition

screenshot

In the previous example, we placed the transition syntax in the #loremdiv selector. What happens if we reverse this and place the same snippet inside of the #loremdiv: hover selector?

Even though it feels wrong, it turns out that this still produces a transition. However, it only produces a transition on the hover event, when the user exits the hover, the transformation is immediate.

This effectively gives us what we were looking for: a way to vary the mouse in and mouse out transitions. However, the mouse out is really no transition at all at this point, which isn’t very exciting.

Demo: Click here to see this example in action.

Doubled Syntax: Two Customizable Transitions

screenshot

Now we’ve tried linking the transition to the normal selector and we’ve tried putting it in the hover selector, now let’s see what happens when we put a transition in both places.

Notice that I’ve reduced the amount of time on the first transition so that we can tell what it does. Interestingly enough, the result here is the opposite of what many people expect.

Intuitively, you might come to the conclusion that the first transition statement will be applied on mouse in and the second on mouse out. However, the opposite is true. As we discovered in our last example, the snippet associated with the hover selector affects the mouse in event, leaving the other one for the mouse out.

Now we have the setup that we were shooting for! This gives us complete freedom to vary the mouse in and mouse out effects. What I’ve done with this example is reduce the amount of time that it takes for the animation to complete when the user exits the hover.

Demo: Click here to see this example in action.

Varying the Effects

screenshot

Taking this idea even further, you can’t only vary the time, you can also vary the property and timing function. Here’s an example:

Here I stuck with the same animation that we’ve been using for the hover event, but when the user exits the hover, the only thing that animates back is the border radius.

Demo: Click here to see this example in action.

Conclusion

To sum up, there are three basic ways that you can approach CSS transitions. The first way is to link the transition to a non-hover selector. This makes the hover in and out transitions the same (only in reverse of course). The second way is to link the transition to a hover selector. This creates a hover in transition but eliminates the hover out transition.

Finally, the third way is to link transitions to both selectors. In this case, the non-hover transition will affect the hover out event and the hover transition will effect the hover in event. This is the technique that you’ll want to go with if you want the most control over the separate events.

Leave a comment below and let us know what you think of all this. Have you ever noticed that separate hover in/out events were possible? Have you utilized this in any way?