User Action Pseudo-Classes
Understand the user action pseudo-classes in CSS to define the styles of elements based on the user’s interaction states.
User action pseudo-classes enable us to style elements in response to user interactions such as hovering, focusing, or activating elements. They are essential for creating interactive and responsive designs.
Hover over elements
The :hover pseudo-class is applied when a user hovers over an element with a pointing device. It’s commonly used to change the appearance of links or buttons when the user points at them. Let’s look at the following example.
In the above CSS code:
Lines 2–6: We style the button with a blue background and white text.
Line 8–9: We introduce the
:hoverpseudo-class to change the background color when the user hovers over the button.
Elements in active state
The :active pseudo-class is applied during the period an element is being activated, such as when a button is pressed. It provides immediate feedback to the user during the interaction. Have a look at the following example.
In the above CSS code: ...