Trong CSS, nhiều loại con trỏ khác nhau được sử dụng cho các phần tử HTML khác nhau và để thay đổi loại con trỏ, ' con trỏ ”Tài sản được sử dụng. Nó cho phép bạn thay đổi loại con trỏ và đặt giá trị của con trỏ mà bạn muốn hiển thị trên màn hình. Là một tính năng bổ sung, nó cũng cho phép bạn đặt hình ảnh con trỏ của riêng mình.

Trong hướng dẫn này, bạn sẽ học:

• Thuộc tính CSS con trỏ là gì
• Cách thay đổi con trỏ thành hình ảnh trên Hover bằng CSS

Vì vậy, hãy bắt đầu!

Thuộc tính CSS “con trỏ” là gì?

Để kiểm soát sự xuất hiện của con chuột trên một phần tử HTML, hãy nhấn “ con trỏ ”Thuộc tính CSS có thể được sử dụng. Nó cho phép thay đổi con trỏ thông thường thành nhiều loại khác nhau như con trỏ sao chép, con trỏ tay, gắp, và nhiều loại khác. Bạn cũng có thể đặt con trỏ tùy chỉnh của riêng mình bằng cách đặt url của hình ảnh trong thuộc tính con trỏ.

Cú pháp

Cú pháp của thuộc tính con trỏ được đưa ra như sau:

Trong cú pháp đã cho ở trên, hãy chỉ định đường dẫn của hình ảnh trong “ url () ”Mà bạn muốn hiển thị trên màn hình.

Bây giờ chúng ta sẽ chuyển sang ví dụ để thay đổi con trỏ thông thường thành một hình ảnh khi di chuột.

Làm thế nào để thay đổi con trỏ thành hình ảnh trên di chuột bằng cách sử dụng CSS?

Để thay đổi con trỏ thành hình ảnh khi di chuột, trước tiên, hãy thêm một phần tử trong HTML.

Ví dụ 1: Thay đổi Con trỏ thành Hình ảnh trên Di chuột bằng Thuộc tính con trỏ

Chúng tôi sẽ tạo một tiêu đề

và tên lớp nút “ btn ”.

HTML

< thân hình >
< h1 > Thay đổi Con trỏ thành Hình ảnh trên Di chuột h1 >
< cái nút lớp = 'btn' > Nhấp vào đây cái nút >
thân hình >

Hiện tại, di chuột vào nút sẽ hiển thị con trỏ mặc định:

Bây giờ chuyển đến CSS và thay đổi con trỏ thành hình ảnh.

Sau đó, đặt đường dẫn của hình ảnh trong “ url () ”. Ví dụ: chúng tôi đã chỉ định “i with.svg ”Như hình ảnh đã chọn của chúng tôi. Sau đó, đặt giá trị của thuộc tính con trỏ là “ Tự động ”.

CSS

.btn {
con trỏ: url ( icon.svg ) , Tự động;
đệm: 10px;
}

Lưu đoạn mã trên và thực thi tệp HTML để xem kết quả sau:

Đầu ra đã cho cho biết rằng con trỏ đã được thay đổi thành công thành hình ảnh khi di chuột.

Ghi chú: “ Tự động ”Được sử dụng như một tùy chọn thay thế trong thuộc tính con trỏ; khi hình ảnh không tải, hoặc đường dẫn tệp hoặc bản thân tệp bị thiếu, biểu tượng mặc định được hiển thị trên màn hình do giá trị tự động.

Ví dụ 2: Đặt Con trỏ mặc định trên Di chuột

Ví dụ: chúng tôi sẽ cung cấp url của hình ảnh và chỉ đặt giá trị của thuộc tính con trỏ là “ Tự động ”:

con trỏ: url ( ) , Tự động;

Do đó, con trỏ sẽ không thay đổi khi di chuột qua nút:

Ví dụ 3: Đặt Hình ảnh Thay thế trên Di chuột

Thay vì tự động, bạn có thể đặt các giá trị khác nhau của con trỏ mà bạn muốn hiển thị để thay thế cho hình ảnh. Ví dụ: chúng tôi sẽ thay đổi giá trị của thuộc tính con trỏ từ “ Tự động ' đến ' con trỏ ”:

con trỏ: url ( ) , con trỏ;

Như bạn có thể thấy trong đầu ra bên dưới, con trỏ được thay đổi thành con trỏ tay khi nó di chuột qua nút:

Chúng tôi đã cung cấp phương pháp dễ dàng nhất để thay đổi hình ảnh con trỏ khi di chuột bằng CSS.

Sự kết luận

Trong CSS, bạn có thể thay đổi con trỏ thành hình ảnh khi di chuột bằng cách sử dụng “ con trỏ ' tài sản. Nó cho phép thay đổi một con trỏ thông thường thành một hình ảnh bằng cách gán “ url ”Của hình ảnh vào thuộc tính con trỏ. Bạn có thể áp dụng bất kỳ loại con trỏ nào bạn muốn hiển thị khi nó di chuột qua một phần tử. Bài viết này đã trình bày phương pháp thay đổi con trỏ thành con trỏ tay.