Mục tiêu của hướng dẫn này là khám phá cách thay đổi hình ảnh khi di chuột bằng CSS. Vì vậy, hãy bắt đầu!
: Di chuột trong CSS là gì?
: Hover là một phần tử của lớp giả được sử dụng để thay đổi trạng thái của các phần tử HTML khi một con chuột kích hoạt nó. Bộ chọn CSS này chủ yếu được sử dụng để tạo kiểu hoặc chọn các phần tử. Tuy nhiên, nó không thể được áp dụng cho các liên kết.
Cú pháp
Cú pháp của: hover được đưa ra dưới đây:
yếu tố : bay lượn {
Mã CSS. . .
}
Nơi đây, ' yếu tố ”Đề cập đến phần tử mà bạn muốn áp dụng hiệu ứng di chuột.
Bây giờ, chúng ta sẽ chuyển sang ví dụ thực tế về việc thay đổi hình ảnh khi di chuột bằng CSS.
Ví dụ: Làm thế nào để thay đổi hình ảnh trên Hover bằng CSS?
Để thay đổi hình ảnh khi di chuột trước tiên, hãy thêm hai hình ảnh vào phần HTML. Hình ảnh đầu tiên là trạng thái hoạt động và hình ảnh tiếp theo là trạng thái di chuột.
Bước 1: Thêm hình ảnh
Với mục đích cụ thể, chúng tôi sẽ thêm hai hình ảnh, “ image1 ' và ' image2 ”Và gán tên lớp cho hình ảnh thứ hai là“ hover_img ”.
HTML
< thân hình >< div lớp = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' lớp = 'hover_img' >
< / div >
< / thân hình >
Bước 2: Tạo kiểu cho hình ảnh
Bây giờ, hãy chuyển sang CSS để đặt vị trí của cả hai hình ảnh bằng cách sử dụng “ Chức vụ ' tài sản. Chúng tôi sẽ đặt vị trí của nó là “ tuyệt đối ”Để định vị nó tuyệt đối với tham chiếu đến cha mẹ gần nhất của nó.
CSS
.img {Chức vụ : tuyệt đối ;
}
Điều này sẽ cho thấy kết quả sau:
Trong bước tiếp theo, chúng ta sẽ đặt hình ảnh thứ hai ở phía trước hình ảnh đầu tiên. Để làm như vậy, chúng tôi sẽ đặt vị trí của hình ảnh là “ tuyệt đối ”Và đặt vị trí trên cùng và bên trái là“ 0 ”. Sử dụng hình ảnh này được đặt trước hình ảnh đầu tiên, nhưng chúng tôi muốn hiển thị hình ảnh thứ hai khi di chuột vào nó. Vì vậy, đặt giá trị hiển thị là “ không ai ”Sẽ hiển thị kết quả mong muốn:
.hover_img {Chức vụ : tuyệt đối ;
đứng đầu : 0 ;
bên trái : 0 ;
trưng bày : không ai ;
}
Đầu ra của mã đã cho như sau:
Hình ảnh thứ hai được ẩn thành công sau hình ảnh đầu tiên.
Bây giờ, hãy chuyển sang bước tiếp theo.
Bước 3: Thay đổi hình ảnh trên Di chuột
Tiếp theo, sử dụng “ :bay lượn ”Và chọn“ .img ”Để áp dụng di chuột cho phần tử đã chọn. Sau đó, gán tên lớp của hình ảnh thứ hai “ .hover_img ”. Sau đó, bên trong dấu ngoặc đơn, hãy đặt giá trị của thuộc tính hiển thị là “ nội tuyến ”Sẽ buộc phần tử nằm trong cùng một dòng:
.img : bay lượn .hover_img {trưng bày : nội tuyến ;
}
Đây là kết quả chứng minh rằng hình ảnh bị thay đổi khi người dùng di chuột vào nó:
Kết quả đưa ra ở trên cho biết rằng chúng tôi đã thay đổi thành công hình ảnh khi di chuột bằng CSS.
Sự kết luận
Có thể thay đổi hình ảnh khi di chuột bằng cách sử dụng nút “ :bay lượn ”Phần tử lớp giả. Để làm như vậy, hãy thêm các hình ảnh được yêu cầu vào tệp HTML, đặt chúng ở cùng một vị trí bằng cách sử dụng CSS và áp dụng: hover selector trên chúng. Do đó, hình ảnh đầu tiên sẽ thay đổi khi di chuột qua nó. Trong bài viết này, chúng tôi đã giải thích cách thay đổi hình ảnh khi di chuột bằng cách sử dụng: hover với một ví dụ thực tế.