Chúng tôi sẽ sử dụng hai phương pháp. Phương pháp đầu tiên là thay đổi nền và màu của nút. Thứ hai là thay đổi nền của nút bằng. trước phần tử giả
Nút bên trong biểu mẫu [loại nút =”gửi”]
Chỉ cần thay đổi hình nền và màu sắc
Xem Bút #1 Chỉ cần thay đổi nền và màu — nút type="submit" của kirill [@kirivaha] trên CodePen
Thay đổi nó với. trước phần tử giả [lưu ý khoảng thời gian bạn muốn đặt bên trong nút]
Xem Bút Thay đổi hình nền bằng. trước — button type="submit" của kirill [@kirivaha] trên CodePen
Nút bên trong biểu mẫu [kiểu nhập=”gửi”]
Nguyên tắc tương tự như trên, nhưng thay vì button[type=”submit”] bạn cần đặt input[type=”submit”] trong CSS
Nút là một phần tử riêng biệt trong mã html
Chỉ cần thay đổi hình nền và màu sắc
Xem Bút Thay đổi màu của nút — div thông thường của kirill [@kirivaha] trên CodePen
Và bây giờ chúng ta thay đổi màu sắc với. trước phần tử giả
Xem Bút Đổi màu nút bấm bằng. trước — div thông thường của kirill [@kirivaha] trên CodePen
Nút trong Bootstrap
Bạn cần tìm đúng lớp [hoặc id], cũng như thứ tự sắp xếp phù hợp của các phần tử để thay đổi màu nút trong Bootstrap
Ví dụ, bạn có nút
Primary
Và bạn muốn thay đổi màu sắc của nó khi di chuột. Sau đó, tôi khuyên bạn nên viết như sau bằng CSS
.btn.btn-outline-primary:hover {
background: red; /* Or any other color */
/* I would also change the color for the border */
}
Cách thay đổi màu nút bằng JS
Tôi sẽ chỉ cho bạn hai cách để thay đổi màu nút khi di chuột bằng JavaScript
Cách đầu tiên - chúng tôi sẽ thêm một lớp từ nút của chúng tôi thông qua JS
Xem Bút Thay đổi màu của nút bằng JS — bằng cách thêm lớp mới của kirill [@kirivaha] trên CodePen
Cách thứ hai – chúng ta sẽ thay đổi kiểu css trực tiếp trong JS
Xem Bút không đề của kirill [@kirivaha] trên CodePen
Hy vọng tôi đã giúp bạn hiểu cách bạn có thể thay đổi màu nút khi con trỏ trỏ vào nó. Tóm lại, tôi khuyên bạn nên xem video và cuối cùng làm sáng tỏ tất cả các câu hỏi
Này, cho đến giờ nút của chúng tôi chỉ được đặt ở đó, không hoạt động nhiều lắm, nhưng bây giờ hãy xem khi tôi di chuột qua, nó bị mờ màu xanh lá cây, đó được gọi là Lớp giả. Chúng ta sẽ sử dụng Pseudo Hover. Tôi sẽ chỉ cho bạn cách thực hiện ngay bây giờ bằng mã VS
Hiện tại nút của tôi không có di chuột. Khi tôi di chuột qua nó, tôi nhận được bàn tay chuột Mickey, nhưng tôi không nhận được di chuột đó như bạn đã thấy trong phần giới thiệu. Cách để đạt được điều đó là một thứ được gọi là Lớp giả, bởi vì thẻ A ở đây có nhiều hơn một loại trạng thái. Nó có trạng thái 'không được chạm vào', nó có trạng thái 'di chuột', nó có trạng thái 'khi tôi nhấp vào nó' và nó có trạng thái 'Tôi đã ở đó trước đây'. Đó không phải là những từ kỹ thuật nhưng bạn hiểu ý tôi
Có một loại-- nó thực hiện một số việc khác nhau và bạn có thể tấn công chúng bằng cách tạo Lớp giả. Lớp giả hoạt động như thế này. Tôi sẽ làm điều đó với nút của mình, bởi vì đó là những gì tôi đã áp dụng cho thứ này. Vì vậy, bạn tạo một Lớp khác, và bạn nói, nút của tôi, được rồi, tôi đánh vần đúng. Bạn cần-- Tôi muốn tấn công di chuột, và cách thức hoạt động của Lớp giả là tất cả cần phải được liên kết với nhau, và nó cần nói lên điều đó, vì vậy tôi sẽ tấn công di chuột, trạng thái di chuột
Tôi sẽ thay đổi màu nền và tôi sẽ chọn một thứ. Đặt dấu chấm phẩy của tôi. Chọn đi, tôi sẽ chọn thứ gì đó ấm áp hơn một chút ở đây. Và hy vọng bây giờ khi tôi xem trước nó, tôi có thể di chuột lên trên nó, thế là xong. Cái đó có trạng thái di chuột giả mà tôi đã tìm thấy và thay đổi. Tuyệt nhỉ
Bạn có thể nhận thấy trong phần giới thiệu, tôi đã làm cho nó mờ đi, hãy làm điều đó. Vì vậy, trong css3, chúng ta có thể thực hiện quá trình chuyển đổi, thời lượng chuyển đổi, vậy nó sẽ thực hiện trong bao lâu? . Vì vậy, sẽ mất 1 giây để thứ này kích hoạt. Hãy cho nó một bản xem trước, sẵn sàng? . Tuyệt nhỉ
Bây giờ chúng ta đã xem xét trạng thái Hover, có những trạng thái khác. Tôi chỉ cho bạn xem w3schools. com cho các lớp giả khác nhau. Đó là điều chúng ta đã nói đến, hãy xem chúng-- có Di chuột xuống, đó là điều chính bạn sẽ làm. Tôi chưa bao giờ chạm vào Liên kết đã truy cập hoặc Đang hoạt động, nhưng hãy xem qua một chút để bạn biết chúng là gì
Vì vậy, hiện tại-- nó có màu đỏ nếu bạn chưa nhấp vào nó. Tôi đã nhấp vào nó nên nó có màu xanh lá cây. Vì vậy, tôi đã truy cập cái này, vì vậy nó có màu xanh lục, khi tôi di chuột qua, nó có màu hồng đậm. Đây rồi, đó là những gì chúng tôi đã làm, di chuột và cái này ở đây, khi nó hoạt động, nó chuyển sang màu xanh lam. Xem này, khi tôi nhấp vào nó, nó chuyển sang màu xanh trong một giây. Tôi không bao giờ tô màu đó, bởi vì ai sẽ nhìn thấy, bởi vì tôi nhấp vào nó như thế này, như một người bình thường. Siêu nhanh và bạn không bao giờ thấy màu sắc thay đổi. Tuy nhiên, điều đó tùy thuộc vào bạn, bạn có thể thích thay đổi màu hiện hoạt, bạn có thể thấy, chỉ cần cú pháp, đó là dấu hai chấm, 'a. ', và sau đó chúng được xác định trước
Nó sẽ đảm bảo rằng đó là dấu hai chấm ở giữa. Có rất nhiều lớp giả khác, ở dưới cùng của w3schools này, có rất nhiều lớp khác nhau. Chúng tôi sẽ giới thiệu thêm một vài trong số chúng trong video tiếp theo. Vì vậy, vâng, dù sao chúng tôi cũng sẽ đề cập đến những cái mà tôi sử dụng. Rất nhiều trong số chúng ở đây tôi chưa bao giờ có cơ hội sử dụng, nhưng vâng, có rất nhiều lớp Pseudo ngoài hover. Hãy chuyển sang video tiếp theo và kiểm tra một vài trong số chúng