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

Will draws and paints out of habit and addiction. He writes about his struggles on the battlefield of art in the Art Archive section of this site.

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 );
    }
 
}