Con trỏ css mạnh gi

Thuộc tính con trỏ là thuộc tính dùng để thay đổi dạng hiển thị chuột trên trang web. Có 7 loại với chuột chính là. “tay”, “chữ thập”, “văn bản”, “chờ”, “di chuyển”, “chờ”, và “thay đổi kích thước”. Các bạn có thể tham khảo ví dụ Di chuột qua các từ để thay đổi con trỏ để biết thêm nhiều dạng con chuột khác

Con trỏ css mạnh gi
Con trỏ css mạnh gi

Để áp dụng cho các phần tử trong HTML, đầu tiên tạo 1 vùng

với lớp tên là “div1” và định nghĩa phong cách của lớp này.

.div1
{
   width:100px;
   height:100px;
   background-color:pink;
   cursor: crosshair;
}
...
Khi rê chuột thì hiển thị dạng con trỏ crosshair

Kết quả là, chuột được chuyển thành dấu thập phân như trong hình

Con trỏ css mạnh gi
Con trỏ css mạnh gi

Nếu bạn muốn con chuột hiển thị 1 định dạng khác ngoài định dạng mặc định, bạn có thể tạo 1 tập tin. ico or file. png (chỉ hoạt động với trình duyệt Chrome, Coccoc) để định dạng chuột mới. Sau đó sử dụng đoạn mã

body
{
     cursor:url("mousecursor.ico"), default;
}

Khi đó toàn bộ trang web đều hiển thị với chuột với định dạng như sau

Con trỏ css mạnh gi
Con trỏ css mạnh gi

Có nhiều trang áp dụng đổi chuột để làm cho trang trở nên bắt mắt hơn. Các bạn có thể sử dụng trang http. //icoconvert. com/ to convert format 1 image to format. ico

Bạn muốn biết ngay không, thay thế thì dưới đây là tên của các thuộc tính đó, bạn cứ di chuột qua từng từ để thấy bằng con trỏ chuột đtột thay đổi. Đương nhiên, hiệu ứng với trỏ chuột chỉ được tìm thấy trên máy bàn

tự động
bí danh
chữ thập
thay đổi kích thước màu
mặc định
e-resize
help
di chuyển
n-resize
ne-resize
nw-resize
không được phép
no-drop
con trỏ
tiến trình
thay đổi kích thước hàng
s-resize
se-resize
sw-resize
text
w-resize
chờ

mẫu mã

p.wresize {cursor:w-resize}
p.move {cursor:move}
p.wait {cursor:wait}

Mỗi lần hiệu ứng với con trỏ chuột có các ứng dụng thực tế khác nhau, trong đó thường gặp nhất là hiệu ứng con trỏ, dành cho các nút bấm. Các hiệu ứng thay đổi kích thước có thể dành cho các mục nhập cho phép thư giãn kép, ví dụ như bình luận

add sung. với các hiệu ứng CSS ổn định, bạn có thể tách nó ra và đưa vào một tệp CSS riêng, để bảo vệ nó trên các trang khác nhau


Các thông số

  • default value. tự động
  • Kế thừa kế thừa. đồng
  • Phiên bản CSS. Bắt đầu được đưa vào từ CSS2
  • Cú pháp trong JavaScript, ví dụ
object.style.cursor="crosshair"

Support browser

Tất cả các trình duyệt phổ biến bao gồm Chrome (5. 0), FireFox (4. 0), Opera(9. 6), Safari (5. 0) qua IE/Edge (5. 5) đều hỗ trợ các thuộc tính liên quan đến với con trỏ

Trong các bài học CSS trước Taimienphi. vn đã giới thiệu cho bạn thuộc tính padding trong CSS. Bài học tiếp theo bên dưới Taimienphi. vn sẽ giới thiệu tiếp cho bạn về thuộc tính con trỏ trong CSS

Con trỏ thuộc tính trong CSS được sử dụng để chỉ kiểu con trỏ chuột được hiển thị khi người dùng di chuột qua phần tử. Tham khảo tiếp bài viết dưới đây của Taimienphi. vn để tìm hiểu chi tiết cú pháp và thuộc tính con trỏ trong CSS

Con trỏ css mạnh gi

Thuộc tính con trỏ CSS mạnh

Thuộc tính Con trỏ CSS mạnh

Dưới đây là bảng tổng quan về thuộc tính con trỏ trong CSS

Con trỏ css mạnh gi

- Giá trị mặc định Tự động
- Kế thừa Có
- Phiên bản CSS2
- Cú pháp JavaScript vật. Phong cách. con trỏ="chữ thập"

ví dụ

Con trỏ css mạnh gi

Con trỏ css mạnh gi

Kết quả đầu ra có dạng như dưới đây

Con trỏ css mạnh gi

1. Hỗ trợ trình duyệt con trỏ thuộc tính trong CSS

Dưới đây là danh sách các phiên bản trình duyệt hỗ trợ thuộc tính con trỏ trong CSS.
-Chrome v5. 0 trở lên.
- Trinh duyệt Microsoft Edge v5. 5.
- Duyệt Firefox v4. 0.
- Browse Safari v5. 0.
- Trình duyệt Opera v9. 6.

2. Cú pháp thuộc tính con trỏ trong CSS

Cú pháp thuộc tính con trỏ trong CSS có dạng như sau

con trỏ. giá trị;

3. Giá trị của con trỏ thuộc tính trong CSS

Dưới đây là danh sách các giá trị của con trỏ thuộc tính trong CSS

Con trỏ css mạnh gi

Con trỏ css mạnh gi

Con trỏ css mạnh gi

https. //thuthuat. taimienphi. vn/thuoc-tinh-cursor-strong-css-50605n. aspx
Bài học trên Taimienphi đây. vn vừa giới thiệu cho bạn các thuộc tính con trỏ trong CSS. Ngoài ra nếu có bất kỳ thắc mắc hay câu hỏi nào cần giải đáp, bạn đọc có thể phản hồi lại ý kiến ​​của mình trong PHầnh luận bên dưới bài viết nhé!. Trong bài học CSS tiếp theo Taimienphi. vn sẽ giới thiệu tiếp cho bạn về thuộc tính Outline trong CSS nhé.