Will McLean is a designer and artist working in the Central Coast of NSW where he lives with his wife and 2 children.

Will is a meticulous developer and favours simplicity and clarity within his code. He can’t stand writing things twice so searches for any way to automate. His experiments can be found in the Exercises section of this site.

Will designs within systems. No project is too small for a design system. He favours the unusual, if not, how can he progress? You can read about his work in the Case Studies section of this site.

Updated: October 26, 2017

This is a Knowledge Base post.

A vanilla JS structure for hover states on more than one element

If you want to do some crazy hover effects using javascript on multiple elements on a page then use this structure. This technique is useful if you want to use something from the mousemove event, like the mouse position.

function yourHovers() {
    let elements = document.querySelectorAll( '.classname' );
    for ( let element of elements ) {
        elementHover( preview );
    function mousemoveHandler( event ) {
        // Do stuff
    function mouseleaveHandler() {
        // Reset stuff
    function elementHover( element ) {
        element.addEventListener( 'mousemove', mousemoveHandler );
        element.addEventListener( 'mouseleave', mouseleaveHandler );