CSS - Events Reference
Types of CSS Events
CSS has events that let you add interactivity and respond to user actions or browser events. Here are the main types of CSS events:
Mouse Events
click: Triggered when an element is clicked by the user. It happens when the mouse button is pressed and released on an element.mouseover: Triggered when the mouse pointer enters an element. It fires when the user moves the mouse cursor over an element.mouseout: Opposite to themouseoverevent, triggered when the mouse pointer leaves an element. It happens when the user moves the mouse cursor away from an element.mousedown: Triggered when a mouse button is pressed on an element. It fires as soon as the user presses the mouse button, before releasing it.mouseup: Triggered when a mouse button is released on an element. It happens after the user has pressed and then released the mouse button on an element.
Keyboard Events
keydown: Triggered when a key is pressed. It fires as soon as the user presses a key on the keyboard, before the key is released.keyup: Triggered when a key is released. It happens after the user has pressed and then released a key on the keyboard.keypress: Triggered when a key is pressed and released. It fires when the user presses and releases a key on the keyboard.
Form Events
focus: Triggered when an element receives focus. It happens when an element becomes the target of keyboard events or when the user clicks on an element.blur: Triggered when an element loses focus. It fires when an element is no longer the target of keyboard events or when the user clicks outside the element.change: Triggered when the value of an element changes. It happens when the user modifies the value of form elements such as input fields, checkboxes, or radio buttons.submit: Triggered when a form is submitted. It fires when the user clicks the submit button or presses the Enter key within a form.
Media Events
play: Triggered when media starts playing. It happens when the user starts playback of audio or video elements.pause: Triggered when media is paused. It fires when the user pauses the playback of audio or video elements.ended: Triggered when media playback ends. It happens when the audio or video element reaches the end of its playback.
Transition Events
transitionstart: Triggered when a CSS transition starts. It fires at the beginning of a transition effect applied to an element.transitionend: Triggered when a CSS transition ends. It happens when a transition effect on an element has completed.
These are the main types of CSS events that you can use to add interactivity and respond to user actions in your web pages. By using the right event types and applying styles or running JavaScript code in response to these events, you can create dynamic and engaging user experiences.
Handling CSS Events
CSS has pseudo-classes that let you target elements based on events and apply styles to them in response to user actions. These pseudo-classes are keywords that you can add to your CSS selectors to define styles for specific event states.
A commonly used pseudo-class is :hover. It targets an element when the mouse pointer is over it. You can use the :hover pseudo-class to change the color or background of a button when you move your mouse over it. This adds interactivity and visual feedback to your actions.
Another pseudo-class is :focus, which targets an element when it receives focus. An element receives focus when you click on it or navigate to it using the keyboard. You can use the :focus pseudo-class to apply styles to form inputs or other focusable elements to show that they are currently selected or ready for input.
The :active pseudo-class targets an element when it is being activated, such as when a button is being clicked. It lets you define styles that are applied during the active state of an element. This is useful for giving visual feedback to you that your action is being processed.
By combining these pseudo-classes with your CSS selectors, you can apply different styles to elements based on their event states. You can change the background color of a button when it is hovered over, add a border to an input field when it receives focus, or modify the appearance of a link when it is being clicked.
Example: Using pseudo-classes to handle events
button {
background-color: #f0f0f0;
color: #333;
}
button:hover {
background-color: #e0e0e0;
}
button:focus {
outline: 2px solid blue;
}
button:active {
background-color: #ccc;
}The button has a default background color of #f0f0f0 and text color of #333. When the mouse pointer hovers over the button, the background color changes to #e0e0e0 using the :hover pseudo-class. When the button receives focus, an outline of 2px solid blue is added using the :focus pseudo-class. And when the button is being clicked (activated), the background color changes to #ccc using the :active pseudo-class.
By applying styles to elements based on events using pseudo-classes, you can create interactive and responsive user interfaces that give visual feedback and improve the overall user experience.
Examples
CSS events and pseudo-classes open up possibilities for creating interactive and dynamic elements on your web pages. Let's see a few examples to see how you can apply these concepts in real-world scenarios.
Form Validation Styles
Another application of CSS events is in form validation. You can use the :focus and :invalid pseudo-classes to style form inputs based on their validation state.
Example: Form Validation Styles
input:focus {
border: 2px solid green;
}
input:invalid {
border: 2px solid red;
}In this example, when an input field gets focus (i.e., the user clicks on it or moves to it using the keyboard), the :focus pseudo-class is applied, adding a green border of 2 pixels to the input field. This helps the user see which input field they are currently using.
Also, if the input field fails validation (e.g., if a required field is left empty or if the entered value doesn't match the expected format), the :invalid pseudo-class is applied, adding a red border of 2 pixels to the input field. This gives a clear visual indication to the user that there is an issue with the input and prompts them to fix it.
Transition on Click
CSS events can also be combined with transitions to create smooth and engaging interactions. One example is triggering a transition when an element is clicked using the :active pseudo-class.
Example: Transition on Click
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
transition: transform 0.3s;
}
.box:active {
transform: scale(1.2);
}In this example, we have a <div> element with the class .box. The .box class sets a width and height of 200 pixels and a light gray background color. It also includes a transition property that specifies a transition duration of 0.3 seconds for the transform property.
When the user clicks on the .box element, the :active pseudo-class is applied, triggering the transform property to scale the element by a factor of 1.2. This creates a smooth and interactive effect where the box appears to grow slightly larger when clicked, giving a satisfying user experience.
These are a few examples of how CSS events and pseudo-classes can be used to add interactivity and visual enhancements to your web pages. By combining different events and styles, you can create a range of engaging and dynamic effects that respond to user actions and improve the user experience.