×

Áp dụng style khi phần tử đang được nhấn - :active - trong CSS

Avatar of admin
admin 0 Views

Khi xây dựng các trang web, việc tinh chỉnh trải nghiệm người dùng là một yếu tố rất quan trọng. Trong số các công cụ có sẵn để thực hiện điều này, CSS cung cấp một pseudo-class đặc biệt gọi là :active. Pseudo-class này cho phép bạn áp dụng các style cụ thể cho phần tử HTML khi người dùng đang nhấn vào nó. Điều này không chỉ làm trang web trở nên sinh động mà còn cải thiện khả năng sử dụng bằng cách cung cấp phản hồi trực quan ngay lập tức.

Một vài ứng dụng cơ bản của pseudo-class :active

Pseudo-class :active thường được sử dụng trên các phần tử tương tác như nút bấm, liên kết, và các thành phần điều khiển form khác. Khi người dùng nhấn vào một phần tử, trạng thái :active sẽ được kích hoạt, và phần tử sẽ áp dụng các style được chỉ định cho trạng thái này.

Ví dụ, bạn có thể thay đổi màu nền và màu chữ của một nút khi nó đang được nhấn:

button:active {
    background-color: #555;
    color: #fff;
}

Cách hoạt động của :active

Khi một phần tử được nhấn, browser sẽ kích hoạt trạng thái :active cho phần tử đó ngay lập tức, và style tương ứng sẽ được áp dụng. Trạng thái này chỉ được giữ cho đến khi người dùng thả nút chuột hoặc khi sự kiện nhấn hoàn tất.

Tính tương thích và lưu ý

Pseudo-class :active được hỗ trợ rộng rãi trên các browser hiện đại, bao gồm Chrome, Firefox, Safari, Edge và Internet Explorer. Tuy nhiên, có những điểm cần lưu ý:

  • Trạng thái :active chỉ xảy ra khi phần tử đang được nhấn. Khi người dùng thả chuột, phần tử sẽ quay trở lại trạng thái bình thường hoặc các trạng thái khác như :hover hoặc :focus.
  • Cần chú ý tới thứ tự các pseudo-class trong CSS khi viết mã. Pseudo-class :active thường được viết sau :hover để đảm bảo rằng các style của :active sẽ không bị ghi đè.

Ví dụ:

a:hover {
    color: blue;
}

a:active {
    color: red;
}

Pseudo-class :active trên các phần tử khác

Một số phần tử, như <div> hoặc <span>, không có hành vi mặc định tương tác, nhưng vẫn có thể sử dụng pseudo-class :active để tạo ra hiệu ứng đặc biệt. Ví dụ:

div:active {
    transform: scale(0.98);
}

Với đoạn mã trên, khi người dùng bấm vào phần tử div, nó sẽ có hiệu ứng nhỏ lại một chút, tạo cảm giác tương tác.

Tích hợp với JavaScript

Pseudo-class :active cũng có thể được sử dụng cùng với JavaScript để tạo ra các hiệu ứng tương tác phức tạp hơn. Bạn có thể sử dụng sự kiện mousedown và mouseup để bắt trạng thái nhấn và thả, từ đó điều khiển các thay đổi style qua JavaScript.

Ví dụ:

const button = document.querySelector('button');

button.addEventListener('mousedown', function() {
    button.style.backgroundColor = '#333';
});

button.addEventListener('mouseup', function() {
    button.style.backgroundColor = '';
});

Kết luận

Pseudo-class :active là một công cụ mạnh mẽ trong CSS giúp nâng cao tính tương tác của trang web. Sử dụng đúng cách, nó không chỉ làm tăng tính thẩm mỹ mà còn cải thiện trải nghiệm người dùng. Tận dụng :active cùng với các pseudo-class khác và JavaScript sẽ giúp bạn tạo ra những trang web đầy tính năng và hấp dẫn.

Comments

Bài viết liên quan