Con trỏ CSS

Thuộc tính con trỏ của CSS cho phép bạn chỉ định loại con trỏ sẽ được hiển thị cho người dùng

Một cách sử dụng tốt thuộc tính này là sử dụng hình ảnh cho các nút gửi trên biểu mẫu. Theo mặc định, khi con trỏ di chuyển qua một liên kết, con trỏ sẽ thay đổi từ con trỏ thành bàn tay. Tuy nhiên, nó không thay đổi biểu mẫu cho nút gửi trên biểu mẫu. Do đó, bất cứ khi nào ai đó di chuột qua một hình ảnh là nút gửi, nó sẽ cung cấp manh mối trực quan rằng hình ảnh đó có thể nhấp được

Bảng sau đây hiển thị các giá trị có thể có cho thuộc tính con trỏ -

tự động

Hình dạng của con trỏ phụ thuộc vào khu vực ngữ cảnh mà nó kết thúc. Ví dụ: tôi chuyển qua văn bản, chuyển giao liên kết, v.v.

chữ thập

Dấu thập hoặc dấu cộng

mặc định

Một mũi tên

con trỏ

Một bàn tay trỏ (trong IE 4 giá trị này là bàn tay)

di chuyển

thanh tôi

thay đổi kích thước điện tử

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển sang phải (về phía đông)

thay đổi kích thước

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên trên và sang phải (bắc/đông)

thay đổi kích thước nw

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên và sang trái (bắc/tây)

thay đổi kích thước n

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên (phía bắc)

thay đổi kích thước

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống dưới và sang phải (nam/đông)

thay đổi kích thước sw

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống dưới và sang trái (nam/tây)

thay đổi kích thước s

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống (phía nam)

thay đổi kích thước w

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển sang trái (tây)

chữ

thanh tôi

đợi đã

Một chiếc đồng hồ cát

Cứu giúp

Một dấu chấm hỏi hoặc bong bóng, lý tưởng để sử dụng trên các nút trợ giúp

Nguồn của tệp hình ảnh con trỏ

LƯU Ý – Bạn nên cố gắng chỉ sử dụng những giá trị này để thêm thông tin hữu ích cho người dùng và ở những nơi, họ sẽ thấy con trỏ đó. Ví dụ: sử dụng hình chữ thập khi ai đó di chuột qua một liên kết có thể khiến khách truy cập nhầm lẫn

Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng focus:cursor-auto để chỉ áp dụng tiện ích cursor-auto vào tiêu điểm

Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States

Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng

module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(hand.cur), pointer',
      }
    }
  }
}

Để tìm hiểu thêm, hãy xem tài liệu về Thiết kế đáp ứng, Chế độ tối và

Sử dụng các giá trị tùy chỉnh

Tùy chỉnh chủ đề của bạn

Theo mặc định, Tailwind bao gồm

module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(hand.cur), pointer',
      }
    }
  }
}

module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(hand.cur), pointer',
      }
    }
  }
}

module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(hand.cur), pointer',
      }
    }
  }
}

module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(hand.cur), pointer',
      }
    }
  }
}

module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(hand.cur), pointer',
      }
    }
  }
}

Tìm hiểu thêm về cách tùy chỉnh chủ đề mặc định trong tài liệu

Giá trị tùy ý

Nếu bạn cần sử dụng một giá trị

module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(hand.cur), pointer',
      }
    }
  }
}

Hầu như tất cả các trang web đang thay đổi con trỏ để có trải nghiệm người dùng tốt hơn hoặc chỉ để giải trí. Tùy chỉnh con trỏ là một cách dễ dàng để thêm phần khởi sắc cho trang web của bạn khi cần

Để chỉ định giao diện con trỏ, hãy sử dụng thuộc tính con trỏ CSS, được sử dụng để thay đổi loại con trỏ chuột trên các phần tử. Nó có thể hữu ích trong các trang web nơi các hành động khác nhau nên được thực hiện thay vì chỉ nhấp vào

Chúng tôi sẽ đề cập đến các cách sau để quản lý khả năng sử dụng con trỏ

Nếu bạn muốn thay đổi con trỏ chuột thành con trỏ tay khi di chuột qua mục danh sách, bạn có thể đặt lớp cho mục danh sách của mình (

  
    Title of the document
    
  
  
    
Hover over the list items to see how the default cursor changes into a pointer:
    

      
List item 1 with the default cursor.
      
List item 2 with the pointer cursor.
      
Another list item with the default mouse cursor.
    
  

  
    Title of the document
    
  
  
    
Hover over the list items to see how the cursor changes:
    

      
List item 1
      
List item 2
      
List item 3
      
List item 4
      
List item 5
      
List item 6
      
List item 7
    
  

  
    Title of the document
    
  
  
    

      Hover over the hyperlink to see how the "pointer" changes to "default":
    
    

      W3docs 
      link with the initial "pointer" type.
    
    

      W3docs 
      link with the changed "default" cursor type.
    
  

  
    Title of the document
    
  
  
    
      

    
  

  
    Title of the document
    
  
  
    
What is your impression of our website?
    Happy
    Sad
    Love
  

  
    Title of the document