Mouse Move

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

What if the mouse position could modify the styles of your page? The <hotfx-mouse-move> element does just that by turning mousemove events in JavaScript into CSS custom properties (err, variables) that you can use to style elements.

Note: It looks like you’re looking at this on a device without a mouse. Touch screens also create mouse events but you’ll have to be tapping all over the place to get the demos here to work. It’s not going to work very well to be honest and you may be better off just opening this on your laptop.

This is by far the simplest HotFX component created so far with only about TK lines of code. But don’t let that fool you: this component gives your CSS completely wild new powers and your own creativity will be the biggest limit here.

You can see in the demo above that this is a unitless value. It’s essentially 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.

Here’s how this works. First add this script to your page:

Then wrap the element you want to animate in the custom element:

<hotfx-mouse-move>
  <div>Whatever</div>
</hotfx-mouse-move>

The element will set two custom properties: --hotx-mouse-x and --hotfx-mouse-y which you can then use in your CSS in a calc() function.

transform: translateY(calc(100px * --mouse-x));

You can use that to modify any CSS property that has a number: transforms, color, opacity, filters, you name it.

Rather than try to ruin this by explaining it any more, how about learning by example with some demos?