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

CSS dynamic pseudo-class properties: hover, active and focus, specific code examples are required

In front-end development, CSS is a very important technology that can be implemented The style and layout of the page. In addition to basic styling settings, CSS also provides some dynamic pseudo-class properties, such as hover, active, and focus, which can change the style of an element when the user interacts with it. This article will introduce these three dynamic pseudo-class attributes in detail and give specific code examples.

1. Hover pseudo-class attribute

Hover is a pseudo-class attribute that is triggered when the user hovers the mouse over an element. By setting the hover attribute, we can change the style of the element when the mouse is hovered. The following is a specific example:

HTML code is as follows:

<button class="button">悬停我</button>

CSS code is as follows:

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

.button:hover {
  background-color: red;
}

In the above example, we created a button element. In the initial state The background color of the button is blue and the text is white. The button's background color changes to red when the mouse is hovering over it.

2. Active pseudo-class attribute

active is a pseudo-class attribute that is triggered when the user clicks on an element. By setting the active attribute, we can change the style of the element when clicked. The following is a specific example:

HTML code is as follows:

<button class="button">点击我</button>

CSS code is as follows:

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

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

In the above example, we created a button element. In the initial state The background color of the button is blue and the text is white. When the user clicks the button, the button's background color changes to green.

3. Focus pseudo-class attribute

focus is a pseudo-class attribute that is triggered when the user puts focus on an element. Typically used for form elements such as input boxes. The following is a specific example:

HTML code is as follows:

<input type="text" class="input">

CSS code is as follows:

.input {
  border: 1px solid gray;
  padding: 5px;
}

.input:focus {
  border-color: blue;
}

In the above example, we created an input box element with the initial state The border color of the lower input box is gray. When the user puts focus on the input box, the border color of the input box changes to blue.

It should be noted that the hover, active and focus pseudo-class attributes are only triggered when the user interacts with the element, so the user's operating habits must be considered when designing the page style.

Summary:

CSS’s dynamic pseudo-class attributes can improve user experience by changing the style of elements. In this article, we learned about three commonly used dynamic pseudo-class properties: hover, active and focus, and gave specific code examples. I hope this article will be helpful to your front-end development.

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