Gregor shows how to achieve behaviours similar to event listeners in pure CSS with a few hacks.
You can imagine functionality as something similar to event listeners. We have different ways to simulate these events in pure CSS.
Some examples can be seen on my Codepen. Below I also explain how I used them to create a CSS drawing app.
The following snippets will show the basic code for the events.
.action:hover {
/*
* actions in here will be fired on hover
* This is similar the mouseenter or mouseleave event
*/
}
.action:focus {
/*
* actions in here will be fired on focus
*/
}
.action:active {
/*
* actions in here will be fired on mousedown
*/
}
.action {
transition: all 0;
transition-delay: 999999999999999999999999s;
}
.action:hover {
transition-delay: 0;
/*
* actions in here will be fired on mouseenter
* This is similar to the hover event
*/
}
.action {
transition: all 0;
transition-delay: 0;
}
.action:hover {
transition-delay: 999999999999999999999999s;
/*
* actions in here will be fired on mouseleave
* This is similar to the hover event
*/
}
input[type="radio"]:checked + label{
/*
* actions in here will be fired on click
*/
}
/*
* abstraction
*/
._2:checked ~ .app ._2 {
/*
* actions in here will be fired on click
*/
}
I created a pure CSS drawing app making use of a few of these events. You can see it here.
The basic app is built on radio buttons (click event) and transition-delay (mouseenter & mouseleave).
What is actually happening in this app is the following: