Thuộc tính con trỏ CSS – loại con trỏ trong css

Thuộc tính con trỏ xác định loại con trỏ chuột khi con trỏ chuột ở trên phần tử.

Con trỏ được định nghĩa là không hoặc nhiều hơn được phân tách bằng dấu phẩy & lt; url & gt; giá trị, theo sau là giá trị từ khóa. Mỗi & lt; url & gt; s này phải chỉ ra một tệp hình ảnh. Trình duyệt sẽ quay trở lại hình ảnh tiếp theo nếu nó không thể tải lên hình ảnh được chỉ định đầu tiên. Nếu trình duyệt không thể tìm thấy bất kỳ hình ảnh nào, hình ảnh đó sẽ trở lại giá trị từ khóa.

Phần mở rộng thuộc tính -webkit- được thêm vào để hiển thị một số giá trị cho Safari, Google Chrome và Opera (các phiên bản mới hơn).

Giá trị ban đầu
Tự động

Áp dụng cho
Tất cả các yếu tố.

Được kế thừa
Đúng.

Hoạt hình
Không.

Phiên bản
CSS2

Cú pháp DOM
object.style.cursor = “ô”;

Cú pháp

  
 con trỏ 
: auto | mặc định | không có | menu ngữ cảnh | giúp đỡ | con trỏ | tiến độ | chờ đợi | ô | lông tay | văn bản | URL | văn bản dọc | bí danh | sao chép | di chuyển | không thả | không được phép | cuộn tất cả | thay đổi kích thước col | thay đổi kích thước hàng | n-thay đổi kích thước | s-thay đổi kích thước | thay đổi kích thước điện tử | w-thay đổi kích thước | ns-thay đổi kích thước | ew-thay đổi kích thước | ne-thay đổi kích thước | nw-thay đổi kích thước | thay đổi kích thước | thay đổi kích thước sw | nesw-thay đổi kích thước | nwse-thay đổi kích thước | phóng to | thu nhỏ | lấy | lấy  

Ví dụ về

con trỏ tài sản:

 
 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 style 
 & gt; 
 

      
 body 
 {
        
 text-align 
: center;
        
 font-family 
: Roboto, Helvetica, Arial, sans-serif;
      }
      
. auto 
 {
        
 con trỏ 
: auto;
      }
      
. help 
 {
        
 con trỏ 
: help;
      }
      
. con trỏ 
 {
        
 display 
: flex;
        
 flex-wrap 
: wrap;
      }
      
. con trỏ 
 & gt; 
 div 
 {
        
 flex 
: 
 120px 
;
        
 padding 
: 
 10px 
 
 2px 
;
        
 khoảng trắng 
: nowrap;
        
 border 
: 
 2px 
 solid 
 # 666 
;
        
 border-radius 
: 
 20px 
;
        
 margin 
: 
 0 
 
 5px 
 
 5px 
 
 0 
;
      }
      
. con trỏ 
 & gt; 
 div 
 
: hover 
 {
        
 background 
: 
 # eee 
;
      }
    
 
 & lt; / 
 style 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 h2 
 & gt; 
 Ví dụ về thuộc tính con trỏ 
 & lt; / < p class = "hljs-name"> h2 
 & gt; 

    
 & lt; 
 div 
 
 class 
 = 
" con trỏ "
 & gt; 

      
 & lt; 
 div 
 
 class 
 = 
" auto "
 & gt; 
 auto 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" help "
 & gt;
 help 
 & lt; / 
 div 
 & gt; 

    
 & lt; / 
 div 
 & gt; 

  
 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  

Hãy tự mình thử »

Đây là một ví dụ với tất cả các giá trị của thuộc tính con trỏ. Phần mở rộng -webkit- được thêm vào cho các giá trị “phóng to”, “thu nhỏ”, “lấy” và “lấy”.

Ví dụ về thuộc tính

con trỏ

với các giá trị” phóng to “,” thu nhỏ “,” lấy “và” lấy “:

 
 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 style 
 & gt; 
 

      
 body 
 {
        
 text-align 
: center;
        
 font-family 
: Roboto, Helvetica, Arial, sans-serif;
      }
      
. con trỏ 
 {
        
 display 
: flex;
        
 flex-wrap 
: wrap;
      }
      
. con trỏ 
 & gt; 
 div 
 {
        
 flex 
: 
 120px 
;
        
 padding 
: 
 10px 
 
 2px 
;
        
 khoảng trắng 
: nowrap;
        
 border 
: 
 2px 
 solid 
 # 666 
;
        
 border-radius 
: 
 20px 
;
        
 margin 
: 
 0 
 
 5px 
 
 5px 
 
 0 
;
      }
      
. con trỏ 
 & gt; 
 div 
 
: hover 
 {
        
 background 
: 
 # eee 
;
      }
      
. auto 
 {
        
 con trỏ 
: auto;
      }
      
. default 
 {
        
 con trỏ 
: default;
      }
      
. none 
 {
        
 con trỏ 
: không có;
      }
      
. context-menu 
 {
        
 con trỏ 
: context-menu;
      }
      
. help 
 {
        
 con trỏ 
: help;
      }
      
. pointer 
 {
        
 con trỏ 
: con trỏ;
      }
      
. tiến trình 
 {
        
 con trỏ 
: tiến trình;
      }
      
. đợi đã 
 {
        
 con trỏ 
: chờ đợi;
      }
      
. ô 
 {
        
 con trỏ 
: ô;
      }
      
. crosshair 
 {
        
 con trỏ 
: crosshair;
      }
      
. text 
 {
        
 con trỏ 
: text;
      }
      
. vertical-text 
 {
        
 con trỏ 
: vertical-text;
      }
      
. alias 
 {
        
 con trỏ 
: bí danh;
      }
      
. copy 
 {
        
 con trỏ 
: copy;
      }
      
. di chuyển 
 {
        
 con trỏ 
: di chuyển;
      }
      
. no-drop 
 {
        
 con trỏ 
: no-drop;
      }
      
. not-allow 
 {
        
 con trỏ 
: not-allow;
      }
      
. all-scroll 
 {
        
 con trỏ 
: all-scroll;
      }
      
. col-resize 
 {
        
 con trỏ 
: col-resize;
      }
      
. row-resize 
 {
        
 con trỏ 
: row-resize;
      }
      
. n-resize 
 {
 con trỏ 
: n-resize;
      }
      
. e-resize 
 {
        
 con trỏ 
: e-resize;
      }
      
. s-resize 
 {
        
 con trỏ 
: s-resize;
      }
      
. w-resize 
 {
        
 con trỏ 
: w-resize;
      }
      
. ns-resize 
 {
        
 con trỏ 
: ns-resize;
      }
      
. ew-resize 
 {
        
 con trỏ 
: ew-resize;
      }
      
. ne-resize 
 {
        
 con trỏ 
: ne-resize;
      }
      
. nw-resize 
 {
        
 con trỏ 
: nw-resize;
      }
      
. se-thay đổi kích thước 
 {
        
 con trỏ 
: se-thay đổi kích thước;
      }
      
. sw-resize 
 {
        
 con trỏ 
: sw-resize;
      }
      
. nesw-resize 
 {
        
 con trỏ 
: nesw-resize;
      }
      
. nwse-resize 
 {
        
 con trỏ 
: nwse-resize;
      }
      
. lấy 
 {
        
 con trỏ 
: -webkit-grab;
        
 con trỏ 
: grab;
      }
      
. nắm bắt 
 {
        
 con trỏ 
: -webkit-grabbing;
        
 con trỏ 
: lấy;
      }
      
. phóng to 
 {
        
 con trỏ 
: -webkit-zoom-in;
        
 con trỏ 
: phóng to;
      }
      
. thu nhỏ 
 {
        
 con trỏ 
: -webkit-zoom-out;
        
 con trỏ 
: thu nhỏ;
      }
    
 
 & lt; / 
 style 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 h2 
 & gt; 
 Ví dụ về thuộc tính con trỏ 
 & lt; / < p class = "hljs-name"> h2 
 & gt; 

    
 & lt; 
 p 
 & gt; 
 Di con trỏ chuột qua phần tử để xem các thay đổi 
 & lt; / 
 p 
 & gt; 

    
 & lt; 
 div 
 
 class 
 = 
" con trỏ "
 & gt; 

      
 & lt; 
 div 
 
 class 
 = 
" auto "
 & gt; 
 auto 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" default "
 & gt; 
 default 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" none "
 & gt; 
 none 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" context-menu "
 & gt; 
 context-menu 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" help "
 & gt; 
 help 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" pointer "
 & gt; 
 pointer 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" tiến trình "
 & gt; 
 tiến trình 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" wait "
 & gt; 
 đợi 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" cell "
 & gt; 
 cell 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" crosshair "
 & gt; 
 crosshair 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" text "
 & gt; 
 text 
 & lt; /
 div 
 & gt; 

      
 & lt; 
 div 
 
 class 
 = 
" vertical-text "
 & gt; 
 vertical-text 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" alias "
 & gt; 
 alias 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" copy "
 & gt; 
 copy 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" move "
 & gt; 
 move 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" no-drop "
 & gt; 
 no-drop 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" not-allow "
 & gt; 
 not-allow 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" all-scroll "
 & gt; 
 all-scroll 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" col-resize "
 & gt; 
 col-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" row-resize "
 & gt; 
 row-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" n-resize "
 & gt; 
 n-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" s-resize "
 & gt; 
 s-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" e-resize "
 & gt; 
 e-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" w-resize "
 & gt; 
 w-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" ns-resize "
 & gt; 
 ns-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" ew-resize "
 & gt; 
 ew-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" ne-resize "
 & gt; 
 ne-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" nw-resize "
 & gt; 
 nw-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" se-resize "
 & gt; 
 se-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" sw-resize "
 & gt; 
 sw-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" nesw-resize "
 & gt; 
 nesw-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" nwse-resize "
 & gt; 
 nwse-resize 
 & lt; / 
 div 
 & gt ; 

      
 & lt; 
 div 
 
 class 
 = 
" grab "
 & gt; 
 grab 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" lấy "
 & gt; 
 lấy 
 & lt; / 
 div 
 & gt; 
      
 & lt; 
 div 
 
 class 
 = 
" phóng to "
 & gt; 
 phóng to 
 & lt; / 
 div 
 & gt ;

      
 & lt; 
 div 
 
 class 
 = 
" thu nhỏ "
 & gt; 
 thu nhỏ 
 & lt; / 
 div 
 & gt ; 

    
 & lt; / 
 div 
 & gt; 

  
 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  

Hãy tự mình thử »

Ví dụ về

con trỏ

với giá trị “url”:

 
 & lt; 
 html 
 & gt; 

  
 & lt; 
 head 
 & gt; 

    
 & lt; 
 title 
 & gt; 
 Tiêu đề của tài liệu 
 & lt; / 
 title 
 & gt; 

    
 & lt; 
 style 
 & gt; 
 

      
. con trỏ 
 {
        
 display 
: inline-block;
        
 width 
: 
 30px 
;
        
 height 
: 
 30px 
;
        
 con trỏ 
: 
 url 
 (
 "/ uploads / media / default / 0001/04 / 6388ec92938ec31c9f019a249174f683118b55d6.png "
), tự động;
      }
    
 
 & lt; / 
 style 
 & gt; 

  
 & lt; / 
 head 
 & gt; 

  
 & lt; 
 body 
 & gt; 

    
 & lt; 
 h2 
 & gt; 
 Ví dụ về thuộc tính con trỏ 
 & lt; / < p class = "hljs-name"> h2 
 & gt; 

    
 & lt; 
 p 
 & gt; 
 Di con trỏ chuột qua phần tử để xem các thay đổi 
 & lt; / 
 p 
 & gt; 

    
 & lt; 
 i 
 
 class 
 = 
" con trỏ "
 & gt; 
 Biểu tượng 
 & lt; / 
 i 
 & gt; 
  
 & lt; / 
 body 
 & gt; 

 & lt; / 
 html 
 & gt; 
  

Hãy tự mình thử »

Giá trị