top of page arrow
Click NOT Hover

Too many developers rely on hovering the mouse cursor over an element to change its state.
Touchscreens on phones and tablets do not support hovering, so a large percentage of users will not be able to access that important functionality.


Instead of (or even in addition to) relying on a cursor to hover over an element, use a short javascript snippet to make it clickable.

Set up the css styles for the action you want to apply to your clickable elements...


	.highlight {
    background-color: yellow;
	}
	/* Or whatever styles you want to apply 
	when clicked instead of hovered... */

...Add the class to the html element(s)...


<div class="clickable">Element 1</div>
<div class="clickable">Element 2</div>
<div class="clickable">Element 3</div>

	(...and so on...)
  

...then finish the technique with this simple javascript snippet...


document.addEventListener("DOMContentLoaded", function() {
    var clickableElements = document.querySelectorAll(".clickable");

    clickableElements.forEach(function(element) {
        element.addEventListener("click", function() {
            this.classList.toggle("highlight");
        });
    });
});
  

Simple and satisfying!

03/20/2024