Exploration of CSS dynamic pseudo-class properties: hover, active and focus

Exploration of CSS dynamic pseudo-class properties: hover, active and focus

Introduction:
CSS dynamic pseudo-class properties are an important tool for building interactivity and dynamic effects . Among them, hover, active and focus are the three most commonly used pseudo-class attributes. This article will introduce the usage of these three pseudo-class attributes in detail and provide specific code examples.

1. hover pseudo-class attribute:
   hover pseudo-class attribute is used to specify the style when the mouse is hovering over the element. Common applications include changing the color of links, showing hidden content, etc.

Sample code:

a:hover {
  color: red;
}

.div:hover {
  display: block;
}

In the above example, when the mouse is hovering over the link, its color will be changed to red; when the mouse is hovering over the .div element, it will be It is displayed (if it was originally hidden).

2. active Pseudo-class attribute:
   active Pseudo-class attribute is used to specify the style when the mouse is pressed. Typically used to create button press effects or link click effects.

Sample code:

.button:active {
  background-color: yellow;
}

a:active {
  color: blue;
}

In the above example, when the button is pressed, its background color will change to yellow; when the link is clicked, the link text color will become blue.

3. focus Pseudo-class attribute:
   focus Pseudo-class attribute is used to specify the style of the currently focused element. Mainly used in form elements to mark the fields that the user is entering.

Sample code:

input:focus {
  border: 2px solid green;
}

textarea:focus {
  box-shadow: 0 0 5px yellow;
}

In the above example, when the input box gets focus, the border will turn green; when the text field gets focus, a yellow shadow effect will be displayed. .

Summary:
CSS dynamic pseudo-class properties are an important tool for creating interactivity and dynamic effects, among which hover, active and focus are the three most common pseudo-class properties. By rationally using these pseudo-class attributes, you can easily realize style changes of page elements during mouse interaction and focus state. We hope that the above examples can help readers better understand and use these attributes to create more interactive and dynamic web page effects.

The above is the detailed content of Exploration of CSS dynamic pseudo-class properties: hover, active and focus. For more information, please follow other related articles on the PHP Chinese website!