Con trỏ cho biết vị trí trên màn hình mà người dùng có thể nhấp hoặc nhập văn bản. Có thể có các con trỏ khác nhau được sử dụng cho các thành phần trang web khác nhau. Nhà phát triển phải đảm bảo rằng các con trỏ được sử dụng trong ứng dụng phải hấp dẫn. Chẳng hạn, một con trỏ trỏ có thể được sử dụng trên nút khi di chuột. Chỉ báo văn bản (dòng nhấp nháy) được sử dụng trên hộp văn bản nơi nhập văn bản.
Có một số kiểu con trỏ trong CSS được sử dụng bằng cách chỉ định giá trị của thuộc tính con trỏ. Tuy nhiên, nhà phát triển có thể tạo con trỏ tùy chỉnh bằng CSS.
Hướng dẫn nghiên cứu này sẽ cung cấp về:
-
- con trỏ CSS
- CSS con trỏ tùy chỉnh
Trước khi bắt đầu chủ đề này, chúng ta hãy xem một số hình dạng con trỏ CSS với một ví dụ thực tế.
con trỏ CSS
CSS “ con trỏ ” thuộc tính có các giá trị khác nhau, chẳng hạn như con trỏ, không có, tiến trình, v.v. Hãy tạo một bảng chứa các hàng trên đó các con trỏ khác nhau sẽ được hiển thị khi di chuột.
Ví dụ: Tạo một bảng đại diện cho các con trỏ CSS khác nhau trong HTML
Đầu tiên, thêm phần tử
| . Các thẻ | |||
|---|---|---|---|
để điền dữ liệu vào các cột.
| thứ hai đại diện cho các phần tử nút được áp dụng với CSS “ con trỏ ” tài sản với các giá trị khác nhau.
| Mã HTML cho tình huống trên được đưa ra dưới đây: < cái bàn >< tr > < thứ tự Phong cách = 'chiều rộng: 200px;' > bộ chọn con trỏ css thứ tự > < thứ tự Phong cách = 'chiều rộng: 200px;' > kiểu con trỏ thứ tự > tr > < tr > < td > con trỏ: con trỏ td > < td >< cái nút Phong cách = 'con trỏ: con trỏ;' > con trỏ cái nút > td > tr > < tr > < td > con trỏ: tiến trình td > < td >< cái nút Phong cách = 'con trỏ: tiến độ;' > phát triển cái nút > td > tr > < tr > < td > con trỏ: không được phép td > < td >< cái nút Phong cách = 'con trỏ: không được phép;' > không cho phép cái nút > td > tr > < tr > < td > con trỏ: không có td > < td >< cái nút Phong cách = 'con trỏ: không;' > không ai cái nút > td > tr > < tr > < td > con trỏ: di chuyển td > < td >< cái nút Phong cách = 'con trỏ: di chuyển;' > di chuyển cái nút > td > tr > < tr > < td > con trỏ: lấy td > < td >< cái nút Phong cách = 'con trỏ: lấy;' > vồ lấy cái nút > td > tr > < tr > < td > con trỏ: sao chép td > < td >< cái nút Phong cách = 'con trỏ: sao chép;' > sao chép cái nút > td > tr > < tr > < td > con trỏ: thay đổi kích thước col td > < td >< cái nút Phong cách = 'con trỏ: col-resize;' > thay đổi kích thước màu cái nút > td > tr > < tr > < td > con trỏ: thay đổi kích thước hàng td > < td >< cái nút Phong cách = 'con trỏ: thay đổi kích thước hàng;' > thay đổi kích thước hàng cái nút > td > tr > < tr > < td > con trỏ: văn bản td > < td >< cái nút Phong cách = 'con trỏ: văn bản;' > chữ cái nút > td > tr > cái bàn > Phong cách “tất cả” Các yếu tố * {đệm: 0 ; lề: 0 ; họ phông chữ: Arial, Helvetica, sans-serif; }
Phần tử kiểu “bảng” cái bàn {lề: 0px tự động; đường viền: 1px rắn gainboro; }
“ lề ” tài sản hoạt động như được chỉ định ở trên. Phần tử kiểu “td” td {căn chỉnh văn bản: trung tâm; } được áp dụng với thuộc tính “ căn chỉnh văn bản ” với giá trị“ trung tâm ”. Nó sẽ căn chỉnh văn bản của cột ở giữa.
| Phần tử kiểu “nút” cái nút {màu nền: cadetblue; phần đệm: 10px 10px; màu: #ffffff; chiều rộng: 150px; }
Đoạn mã trên sẽ tạo ra kết quả như sau: CSS con trỏ tùy chỉnhCác nhà phát triển phải sử dụng con trỏ phù hợp cho các ứng dụng của họ. Con trỏ nên được làm cho hấp dẫn để thu hút sự chú ý của người dùng. Ngoài ra, con trỏ tùy chỉnh có thể được tạo cho mục đích này. Nhìn vào ví dụ dưới đây! Ví dụ: Cách tạo con trỏ tùy chỉnh bằng CSS? Trong HTML, thêm hai phần tử div. Một với lớp “ khoanh tròn ” và cái khác với lớp “ điểm ”. HTML < div lớp = 'khoanh tròn' > div >< div lớp = 'điểm' > div > Yếu tố “cơ thể” phong cách thân thể {chiều cao: 100vh; } Phong cách 'vòng tròn' div .khoanh tròn {chiều rộng: 20px; chiều cao: 20px; đường viền: 2px màu trắng; bán kính đường viền: năm mươi % ; }
Phong cách 'điểm' div .điểm {chiều rộng: 5px; chiều cao: 5px; màu nền: trắng; bán kính đường viền: năm mươi % ; }
Mã đã cho sẽ hiển thị con trỏ sau trên trang web: JavaScript < kịch bản >const con trỏCircle = document.querySelector ( '.khoanh tròn' ) ; const cursorPoint = document.querySelector ( '.điểm' ) ; const moveCursor = ( và ) = > { const mouseY = e.clientY; const mouseX = e.clientX; con trỏCircle.style.transform = ` Phiên dịch ( ${mouseX} px, ${mouseY} px ) ` ; con trỏPoint.style.transform = ` Phiên dịch ( ${mouseX} px, ${mouseY} px ) ` ; } window.addEventListener ( 'di chuột' , di chuyển con trỏ ) kịch bản >
Sau khi cung cấp các khối mã trên, con trỏ sẽ tự động di chuyển trên màn hình như hình bên dưới: Phần kết luậnCSS “ con trỏ ” có nhiều giá trị biểu thị các kiểu con trỏ khác nhau. Tuy nhiên, bằng cách sử dụng các phần tử HTML và thuộc tính CSS, chúng ta có thể tạo các con trỏ tùy chỉnh. Sau đó, mã JavaScript được triển khai để kích hoạt chức năng của nó. Nghiên cứu này đã trình bày cách tạo con trỏ CSS tùy chỉnh bằng một ví dụ thực tế. |
