Hướng dẫn what is the difference between active and hover css? - sự khác biệt giữa active và hover css là gì?

Question

Quay lại chỉ mục.

Nội dung chính Show

Khi :hover được áp dụng
Khi button:hover { background-color: #ffdb3a; } 7 được áp dụng
Khi :active được áp dụng
Kết hợp :hover, button:hover { background-color: #ffdb3a; } 7 và :active
Thứ tự của phong cách - :hover sau đó button:hover { background-color: #ffdb3a; } 7 sau đó :active
Tóm tắt lại
Sự khác biệt giữa hoạt động và di chuột *là gì?
Hover và hoạt động và tập trung vào CSS là gì?
Sự khác biệt giữa hoạt động và tập trung trong CSS là gì?
Hover có nghĩa là CSS là gì?

Tất nhiên :hover không thực sự hoạt động trên các thiết bị màn hình cảm ứng, vì không có khái niệm về lơ lửng. Thay vào đó, các kiểu :hover được áp dụng khi người dùng đã chạm vào một phần tử và loại bỏ khi anh ta chạm vào một phần tử khác.

Vấn đề tương tự cũng xảy ra với :active và không có cách nào để hiển thị các kiểu hoạt động trên các yếu tố khác ngoài các liên kết trên các thiết bị màn hình cảm ứng.

Hover có nghĩa là CSS là gì?

Trong các trình duyệt rất cũ, chúng chỉ làm việc cho các liên kết, nhưng ngày nay chúng đã được chuyển đến tất cả các yếu tố khác.

Hover có nghĩa là CSS là gì?

Testsheet:

p:hover {color: #CB000F;}
p:active {text-decoration: underline;}

a:hover {text-decoration: overline;}
a:active {font-weight: 600;}

Khi chúng tôi chọn một phần tử bằng

button:hover { background-color: #ffdb3a; }

4 hoặc

button:hover { background-color: #ffdb3a; }

5, chúng tôi sẽ sử dụng các thuộc tính được xác định trước và không thay đổi được nướng vào DOM. Với các lớp giả, chúng tôi có thể chọn các thành phần bằng cách sử dụng thông tin đã có trong DOM và có thể thay đổi dựa trên cách người dùng tương tác với trang.

:hover,

button:hover { background-color: #ffdb3a; }

7 và :active là các lớp giả được xác định bởi các hành động của người dùng. Mỗi người tương ứng với một điểm rất cụ thể trong cách người dùng sẽ tương tác với một phần tử trên một trang như liên kết hoặc nút hoặc trường đầu vào.

Với phạm vi trong các thiết bị đầu vào mà chúng ta có ngày nay, các lớp giả này cũng hoạt động hơi khác nhau tùy thuộc vào việc người dùng có tương tác với phần tử với chuột 🐭, bàn phím hay màn hình cảm ứng, có thể gây khó khăn cho việc biết cách nào và khi nào và khi nào và khi nào Để tạo kiểu cho những tình huống này.🐭, keyboard ⌨️, or touchscreen 📱, which can make it difficult to know how and when to style these situations.

Khi :hover được áp dụng

Phân loại giả :hover, còn được gọi là con trỏ Hover Pseudo-Class, áp dụng khi một thiết bị trỏ tương tác với một phần tử mà không nhất thiết phải kích hoạt nó.

Một ví dụ điển hình về điều này là khi một con chuột lơ lửng trên một phần tử. Nếu bạn di chuột qua nút bên dưới, bạn sẽ thấy rằng nó chuyển sang màu vàng.🐭 hovers over an element. If you hover your mouse over the button below, you’ll see that it turns yellow.

button:hover { background-color: #ffdb3a; }

Khi trên một thiết bị di động 📱, về cơ bản, chỉ có một tương tác bạn có thể thực hiện với bất kỳ phần tử tương tác nào, đó là khai thác/nhấp vào nó. Bạn có thể nhận thấy rằng nếu bạn nhấn vào nút ở trên, nó cũng thay đổi màu sắc mặc dù thực tế là bạn không phải là người chỉ cần di chuột qua nó. Điều này là do, trên các thiết bị di động, các sự kiện kích hoạt các lớp giả này có thể bị kết hợp. Chúng tôi sẽ thấy với các lớp giả

button:hover { background-color: #ffdb3a; }

7 và :active.📱, there’s basically only one interaction you can take with any interactive element, which is tapping/clicking it. You may notice that if you tap on the button above, it also changes the colour despite the fact that you aren’t “just” hovering over it. This is because, on mobile devices, the events that trigger these pseudo-classes can become conflated. We’ll see with

button:hover { background-color: #ffdb3a; }

7 and :active pseudo-classes as well.

Cuối cùng, đối với người dùng của các thiết bị bàn phím ⌨, lớp giả pseudo không bao giờ được kích hoạt. Bàn phím không được coi là một thiết bị con trỏ của người Viking và vì vậy, có thể áp dụng cho con trỏ này Hover Pseudo-Class.⌨️, the :hover pseudo-class is never triggered. The keyboard is not considered a “pointer” device and so can’t apply to this pointer hover pseudo-class.

Khi button:hover { background-color: #ffdb3a; } 7 được áp dụng

Lớp giả

button:hover { background-color: #ffdb3a; }

7 áp dụng khi một phần tử ở trạng thái sẵn sàng tương tác với, tức là nó có trọng tâm của thiết bị đầu vào. Khi điều này áp dụng khác nhau khá nhiều giữa các thiết bị đầu vào khác nhau.

Khi sử dụng chuột 🐭 hoặc thiết bị trỏ tương tự, lớp giả

button:hover { background-color: #ffdb3a; }

7 sẽ áp dụng khi người dùng bắt đầu kích hoạt phần tử và quan trọng, nó sẽ tiếp tục tập trung cho đến khi người dùng kích hoạt phần tử khác. Ví dụ: nếu bạn nhấp vào nút bên dưới bằng chuột, bạn sẽ nhận thấy rằng nó chuyển sang màu vàng khi bạn bắt đầu tương tác nhấp chuột. Nút sẽ chỉ quay trở lại trạng thái mặc định của nó nếu bạn nhấp vào một nơi khác trên trang.🐭 or similar pointing device, the

button:hover { background-color: #ffdb3a; }

7 pseudo-class will apply once the user has begun activating the element and, importantly, it will continue to stay in focus until the user activates another element. For example, if you click the button below with a mouse, you’ll notice that it turns yellow once you begin the click interaction. The button will only return to its default state if you click somewhere else on the page.

button:focus { background-color: #ffdb3a; }

Đối với người dùng bàn phím, tập trung vào một phần tử rất giống với việc di chuột qua nó cho người dùng chuột. Tôi thích nghĩ về lớp giả

button:hover { background-color: #ffdb3a; }

7 như một trạng thái lơ lửng cho các thiết bị bàn phím, bởi vì nó báo hiệu một ý định tương tự cho sự tương tác.⌨️, focusing on an element is very similar to hovering over it for mouse users. I like to think of the

button:hover { background-color: #ffdb3a; }

7 pseudo-class as a hover state for keyboard devices, because it signals a similar intention for interaction.

Đối với người dùng màn hình cảm ứng 📱, lớp giả

button:hover { background-color: #ffdb3a; }

7 được áp dụng một lần nữa, khi người dùng chạm vào phần tử. Tuy nhiên, cần lưu ý rằng điều này không áp dụng cho trình duyệt Safari di động.📱, the

button:hover { background-color: #ffdb3a; }

7 pseudo-class applies, again, when the user taps on the element. However, it should be noted that this doesn’t apply for the mobile Safari browser.

Khi :active được áp dụng

Cuối cùng, lớp giả ____99 áp dụng trong khoảng thời gian phần tử đang được kích hoạt. Ví dụ: nếu sử dụng chuột, đó sẽ là thời gian giữa khi nút chuột được nhấp và khi nó được phát hành.🐭, it would be the time between when the mouse button is clicked and when it is released.

Nếu bạn nhấp vào nút bên dưới một cách nhanh chóng, bạn có thể không nhận thấy sự thay đổi ngắn gọn về màu sắc, nhưng nếu bạn nhấn và bảo trì, bạn sẽ thấy khi nào lớp giả được áp dụng.

button:active { background-color: #ffdb3a; }

Lớp giả ____99 hoạt động theo cùng một cách cho các tương tác chuột và bàn phím.⌨️ interactions.

Trên các thiết bị di động 📱, như lớp giả

button:hover { background-color: #ffdb3a; }

7, lớp giả ____99 áp dụng trên vòi của phần tử. Và một lần nữa, nó không áp dụng tất cả trong trình duyệt Safari di động.📱, like the

button:hover { background-color: #ffdb3a; }

7 pseudo-class, the :active pseudo-class applies on the tap of the element. And again, it doesn’t apply at all in the mobile Safari browser.

Kết hợp :hover, button:hover { background-color: #ffdb3a; } 7 và :active

Một điều bạn có thể nhận thấy là các điều kiện trong đó mỗi lớp giả này có thể được áp dụng không loại trừ lẫn nhau. Trên thực tế, hầu hết các lần khi một phần tử đang được nhấp bằng chuột, cả ba điều kiện đều hợp lệ - chuột nếu qua phần tử, phần tử được lấy nét và phần tử đang được kích hoạt.

Chúng ta có thể kiểm tra điều này bằng cách chỉ thay đổi nền của nút nếu cả ba điều kiện được áp dụng.

button:hover:focus:active {
  background-color: #ffdb3a;
}

Nếu bạn nhấp và giữ nút bên dưới, bạn sẽ thấy rằng nó chuyển sang màu vàng. Nhưng nếu bạn nhấp và giữ trong khi kéo chuột ra khỏi lơ lửng trên nó, bạn sẽ thấy rằng nó sẽ mất màu.

Khả năng kết hợp các lớp giả có thể thực sự hữu ích để tinh chỉnh cách chúng ta muốn tạo kiểu cho các trạng thái khác nhau.

Thứ tự của phong cách - :hover sau đó button:hover { background-color: #ffdb3a; } 7 sau đó :active

Do thực tế là những điều kiện này có thể và thường xuyên được áp dụng cùng một lúc, thứ tự chúng tôi thêm các phong cách này là quan trọng.

Hãy nói rằng chúng tôi có các phong cách sau:

button:active {
  background-color: green;
}

button:focus {
  background-color: blue;
}

button:hover {
  background-color: red;
}

Chỉ có thể nhìn thấy: Kiểu di chuột sẽ được hiển thị

Khi bạn lơ lửng và tương tác với phần tử trên, chỉ các kiểu được áp dụng cho :hover sẽ thắng thế miễn là bạn vẫn đang di chuột qua nó. Như chúng tôi đã thấy, vì cả ba sự kiện được áp dụng trong một sự kiện nhấp chuột điển hình, Cascade tiếp quản và phong cách được xác định cuối cùng sẽ thắng.

Đây là lý do tại sao nó rất quan trọng để xác định các kiểu này theo thứ tự mà chúng thường xảy ra, vì vậy người dùng trở nên rõ ràng khi một tương tác mới được công nhận. Thông thường, người dùng trước tiên sẽ di chuột qua một yếu tố, sau đó đưa nó đến tiêu điểm, sau đó kích hoạt nó. Vì vậy, cách tốt nhất để đặt hàng các kiểu giả của bạn là :hover sau đó

button:hover { background-color: #ffdb3a; }

7 sau đó :active.

button:hover {
  background-color: green;
}

button:focus {
  background-color: blue;
}

button:active {
  background-color: red;
}

Tất cả các kiểu sẽ được hiển thị

Tóm tắt lại

Các lớp giả :hover,

button:hover { background-color: #ffdb3a; }

7 và :active cho phép chúng tôi tạo kiểu các yếu tố để đáp ứng với cách người dùng tương tác với nó. Tùy thuộc vào thiết bị đang được sử dụng, các lớp giả này trở nên hoạt động tại các điểm khác nhau (hoặc hoàn toàn không).

	`:hover`	`button:hover { background-color: #ffdb3a; }` 7	`:active`
Chuột 🐭🐭	Đúng	Đúng	Đúng
Bàn phím ⌨⌨️	Không	Đúng	Đúng
Bàn phím ⌨📱	Không	Màn hình cảm ứng 📱	Màn hình cảm ứng 📱

Có (khi nhấp)

Sự khác biệt giữa hoạt động và di chuột *là gì?

: Hover Pseudoclass cho phép bạn xác định các kiểu của một phần tử mà chuột lơ lửng. : Active có nghĩa là: một yếu tố mà người dùng giữ nút chuột bị suy giảm. Trong các trình duyệt rất cũ, chúng chỉ làm việc cho các liên kết, nhưng ngày nay chúng đã được chuyển đến tất cả các yếu tố khác. Liên kết kiểm tra cho A: Di chuột và A: Hoạt động.:active means: an element that the user holds the mouse button depressed on. In very old browsers they only worked for links, but nowadays they have been ported to all other elements. Test link for a:hover and a:active .

Hover và hoạt động và tập trung vào CSS là gì?

Di chuột: Bằng cách đặt con trỏ của bạn lên nó. Một yếu tố lơ lửng đã sẵn sàng để được kích hoạt bằng chuột hoặc bất kỳ công nghệ phát ra chuột nào (như theo dõi mắt và chuyển động). Trọng tâm: Một yếu tố tập trung đã sẵn sàng để được kích hoạt với bàn phím hoặc bất kỳ công nghệ phát hành bàn phím nào (chẳng hạn như thiết bị chuyển đổi).

Sự khác biệt giữa hoạt động và tập trung trong CSS là gì?

: Focus là khi một phần tử có thể chấp nhận đầu vào - con trỏ trong hộp đầu vào hoặc liên kết đã được lập bảng.: Hoạt động là khi một phần tử đang được người dùng kích hoạt - thời gian giữa khi người dùng nhấn nút chuột và sau đó giải phóng nó.Xin chào!

Hover có nghĩa là CSS là gì?

Bộ chọn CSS: Hover là một trong nhiều lớp giả được sử dụng để tạo các yếu tố.: Di chuột được sử dụng để chọn các yếu tố mà người dùng di động con trỏ hoặc chuột của họ.Nó có thể được sử dụng trên tất cả các yếu tố, không chỉ trên các liên kết.used to select elements that users hover their cursor or mouse over. It can be used on all elements, not only on links.

programming css Hover state CSS active Mobile focus css CSS active inactive CSS active after