본문으로 건너뛰기

Pseudo-class

Pseudo-class

A CSS pseudo-class is a selector that allows you to apply styles to an element when it's in a certain state, such as when it is hovered over, focused on, or targeted.

You use a pseudo-class by appending a colon (:) to the selector and then specifying the style for the particular state.

One frequently used pseudo-class is :hover.

The hover pseudo-class is used to define a style for an HTML element when the mouse cursor is over it.

Below is an example of using the :hover pseudo-class.

HTML

<html>
<body>
<button class="my-button">Hover Me</button>
</body>
</html>

CSS

.my-button {
display: inline-block;
padding: 10px 20px;
background-color: #0000ff;
color: #fff;
border-radius: 5px;
transition: background-color 0.3s ease;
border: none;
}

.my-button:hover {
background-color: #ff0000;
}

The CSS code above styles a button element with the .my-button class.

Using the .my-button:hover pseudo-class, the class changes the button's background color to red when the mouse cursor hovers over it.

The transition property is used to add a smooth animation effect to the change in properties.

In this example, the background color transition is set to 0.3 seconds, resulting in a smooth color change for the button.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!