Thuộc tính CSS con trỏ đặt giao diện con trỏ khi bạn di chuột qua phần tử. Biết về tất cả các giá trị và xem các ví dụ với từng giá trị đó.

Bạn đang xem : 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ị


Xem thêm những thông tin liên quan đến chủ đề loại con trỏ trong css

LTC 63. Giới thiệu về Con trỏ trong lập trình C | Tự học lập trình C

  • Tác giả: TITV
  • Ngày đăng: 2021-01-02
  • Đánh giá: 4 ⭐ ( 7062 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: TỰ HỌC LẬP TRÌNH C

    Khóa học lập trình C do TITV xây dựng (trong thời gian khoảng 1 năm) và cung cấp hoàn toàn miễn phí, mục tiêu là chia sẻ kiến thức về lập trình, các bạn sẽ được làm quen từ những kiến thức cơ bản cho đến nâng cao trong lập trình C. Thông qua những ví dụ đơn giản và rõ ràng, thao tác từng bước chắc chắn các bạn sẽ có thể thực hiện và tự tin hơn trong lập trình C. Các bạn sẽ cần khoảng thời gian khoảng từ 1 đến 2 tháng để có thể hiểu rõ và hoàn tất được khóa học này.

    Trong khóa học này tôi có sử dụng phần truyền tham chiếu của C++, do đó nếu các bạn muốn loại bỏ và chuyển sang thuần C, cần phải chuyển sang con trỏ (được trình bày ở bài 30A).

    Nếu các bạn thấy nội dung của khóa học giúp ích được cho bạn. Tôi sẽ rất vui, nếu bạn mời tôi một ly cà phê ☕. Các khoản đóng góp của bạn sẽ giúp tôi trang trải chi phí hosting và tên miền của trang web này, giúp cho trang này tồn tại lâu hơn.

    Bạn có thể đóng góp bằng các cách sau đây:

    * Ghi các comment, các ý kiến của bạn bên dưới các bài viết, các video trên Youtube

    * Donate: Vietinbank, Chi nhánh 11 TP. HCM, CTK: Le Nhat Tung, STK: 109005606811

    * Donate: https://www.paypal.com/paypalme/titvvn

    Tôi xin chân thành cảm ơn.

    Trân trọng,

    TOÀN BỘ NỘI DUNG CỦA KHÓA HỌC LẬP TRÌNH C
    BAO GỒM VIDEO, GIẢI THÍCH VÀ CODE BẠN CÓ THỂ XEM TẠI ĐÂY:

    https://www.titv.vn/p/lap-trinh-c.html

    PHẦN 1. CÀI ĐẶT VÀ GIỚI THIỆU KIẾN THỨC CƠ BẢN
    PHẦN 2. NHẬP VÀ XUẤT DỮ LIỆU
    PHẦN 3. CÁC PHÉP TOÁN VÀ THƯ VIỆN CƠ BẢN
    PHẦN 4. CÂU LỆNH ĐIỀU KIỆN
    PHẦN 5. VÒNG LẶP
    PHẦN 6. MẢNG 1 CHIỀU
    PHẦN 7. MẢNG 2 CHIỀU
    PHẦN 8. CON TRỎ
    PHẦN 9. XỬ LÝ CHUỖI
    PHẦN 10. KIỂU DỮ LIỆU STRUCT
    PHẦN 11. LÀM VIỆC VỚI FILE

30 CSS selectors cần nhớ (P1)

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 8728 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này mình xin giới thiệu tới các bạn 30 css selector cần nhớ. Do phần này hơi dài nên mình sẽ giới thiệu trước 15 selector. Phần còn lại mình sẽ cập nhật vào tháng sau. Nếu bạn còn thắc mắc…

Có thể ẩn con trỏ trong trang web bằng CSS hoặc Javascript không?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 7992 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Với CSS: selector { cursor: none; } Một ví dụ:
    Some stuff

Cách sử dụng thuộc tính cursor trong CSS để chỉnh kiểu con trỏ khi người dùng di chuyển chuột vào phần tử

  • Tác giả: webcoban.vn
  • Đánh giá: 5 ⭐ ( 9887 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng thuộc tính cursor trong CSS để chỉnh kiểu con trỏ khi người dùng di chuyển chuột vào phần tử và dùng hình ảnh để làm con trỏ

Các loại con trỏ chuột

  • Tác giả: hiepsiit.com
  • Đánh giá: 4 ⭐ ( 1763 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thuộc tính cursor

  • Tác giả: hocwebchuan.com
  • Đánh giá: 5 ⭐ ( 9145 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính cursor hiển thị con trỏ chuột khi duy chuyển con trỏ vào thành phần – Học web chuẩn

Các thuộc tính con trỏ chuột (cursor) trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 4 ⭐ ( 7982 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Sự khác biệt giữa THAM GIA và THAM GIA TRÁI là gì? Câu hỏi này và các câu hỏi THAM GIA khác, đã được trả lời! - còn lại tham gia và tham gia

By ads_php