CSS pointer-events: clever hover states, just a few lines of code
Hover states, as I am mainly accustomed to, are used to highlight a specific element on a page: a button, a list of menu items, or social media links. These hover states let me know that there is something that I can click on, or there is content that I should be aware of, or sometimes simply create a fun and interactive component to a site.
UX philosophy tells me why that’s important: make it easy for the user to identify and click on links, and encourage interaction with the content.
I recently discovered through this clever codepen created by Martijn Cuppens that by using ‘pointer-events:auto’ on the child element, and ‘pointer-events: none’ on the parent element, fun things can happen!
Let me explain.
First of all, the HTML:
We have a parent <div> element holding two child <div> elements, as shown below. Sibling #1 holds the button, and sibling #2 is seemingly empty.
When I hover over the button contained in sibling #1, not only does the button light up, but there is also text that appears in sibling #2. This text is set to white in CSS to be invisible, and is pink when activated.
Now a quick peek at the CSS:
The button in sibling #1 has been set to ‘pointer-events: auto’ — telling the button, “Behave as per usual.”
The parent <div> element has been set to ‘pointer-events: none’, effectively saying to the parent <div>, “If the mouse hovers over you, pretend like nothing happened.” But within sibling #2, that pink hover text that appears has been named .rollover and set to activate when .parent sees some action. The only area within that parent element that has the go-ahead to respond is the area inside .button. So when we hover over the button, the .rollover text in sibling #2 is activated!
In order to demonstrate a possible use for this type of hover, I adjusted a restaurant mock-up site that I had already created. On the homepage, I used the section where a button links to a Recipes page, with the text and button in sibling #1 on the left, and an image in sibling #2 on the right. When the user hovers over the View Recipes button on the left, text appears over the image on the right:
I like this usage because the information that I am hiding in the hover state (in this case, a detailed list of the featured weekly recipes) is not crucial to the navigation of the site. Hiding crucial information about the site’s content or navigation until one hovers over something can be very frustrating and discourage that individual from engaging with the content. In this case, the user already knows exactly where they’re going and what content they’ll encounter when they see the View Recipes button. This rollover is simply enhancing their knowledge, and will possibly encourage them to dive a little deeper.
For a closer look at the code: Check out the codepen by Martijn Cuppens, which features a few other uses of pointer-events to create simple but satisfying hover states.
