Mouse Move

The :hover pseudo class is one of the basics of CSS. But, along with its lesser used cousin :active, it’s pretty much the only way that CSS can respond to mouse interactions.

What if you could use the mouse movement to modify your CSS? The <hotfx-mouse-move> element does just that by turning mousemove events in JavaScript into two custom properties (err, variables) for X and Y axis.

Now, this is by far the simplest HotFX component to date and it has a grand total of 13 lines of code. But don’t let that fool you: this component gives your CSS completely wild new powers and your creativity is the biggest limit here.

You can see in the demo above that this is a unitless value. It’s a percentage, expressed as a value between 0 and 1 that shows you how far you’ve moved over your element in either direction.

What can you do with a unitless value in CSS? Almost anything. Just use it in calc() to modify any CSS property that has a unit: transforms, opacity, colors, transitions. Well, probably more than half of all the styles could be changed.

Rather than try to explain any more, how about learning by example with some inspiration?