Hướng dẫn cursor: pointer css - con trỏ: con trỏ css

Question

Trang chủ
Tham khảo
CSS
Thuộc tính cursor

Nội dung chính Show

Định nghĩa và sử dụng
Cấu trúc
Cách sử dụng thuộc tính cursor
context-menu

Định nghĩa và sử dụng

Thuộc tính cursor hiển thị con trỏ chuột khi duy chuyển con trỏ vào thành phần.

Cấu trúc

Với giá trị như sau:

Hãy di chuyển con trỏ chuột tới từng dạng để thấy rõ sự hiện thị.

Thuộc tính	giá trị	Ví dụ	Mô tả
cursor	auto	cursor: auto;	Trình duyệt tự động thiết lập con trỏ chuột, đây là dạng mặc định.
crosshair	cursor: crosshair;	Con trỏ chuột dạng crosshair.
default	cursor: default;	Con trỏ chuột dạng default.
e-resize	cursor: e-resize;	Con trỏ chuột dạng e-resize.
help	cursor: help;	Con trỏ chuột dạng help.
move	cursor: move;	Con trỏ chuột dạng move.
n-resize	cursor: n-resize;	Con trỏ chuột dạng n-resize.
ne-resize	cursor: ne-resize;	Con trỏ chuột dạng ne-resize.
nw-resize	cursor: nw-resize;	Con trỏ chuột dạng nw-resize.
pointer	cursor: pointer;	Con trỏ chuột dạng pointer.
progress	cursor: progress;	Con trỏ chuột dạng progress.
s-resize	cursor: s-resize;	Con trỏ chuột dạng s-resize.
se-resize	cursor: se-resize;	Con trỏ chuột dạng se-resize.
sw-resize	cursor: sw-resize;	Con trỏ chuột dạng sw-resize.
text	cursor: text;	Con trỏ chuột dạng text.
w-resize	cursor: w-resize;	Con trỏ chuột dạng w-resize.
wait	cursor: wait;	Con trỏ chuột dạng wait.
inherit	cursor: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

Mô tả

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
</body>
</html>

cursor

auto

cursor: auto;

Trình duyệt tự động thiết lập con trỏ chuột, đây là dạng mặc định.

crosshair

cursor: crosshair;

Con trỏ chuột dạng crosshair.

zoom-in cursor trong CSS được dùng để chỉnh kiểu con trỏ của một phần tử HTML khi người dùng di chuyển chuột vào phần tử đó.

Ví dụ: Khi bạn di chuyển chuột vào phần tử này sẽ thấy kiểu con trỏ thay đổi

Cách sử dụng thuộc tính cursor

Cú pháp:

cursor: kiểu con trỏ;

Dưới đây là danh sách những kiểu con trỏ được dùng cho thuộc tính cursor:

Kiểu con trỏ	Hiển thị	Di chuyển chuột vào đây để xem kiểu con trỏ
alias		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ
all-scroll		Di chuyển chuột vào đây để xem kiểu con trỏ

all-scroll

auto

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div{
            padding:50px;
            border:1px solid black;
            font-size:20px;
            cursor:wait;
        }
    </style>
</head>
<body>
    <div>Dí chuột phải đây để xem kiểu con trỏ của phần tử</div>
</body>
</html>

cell

col-resize

copy

Cú pháp:

cursor: url(đường dẫn đến tập tin hình ảnh dùng làm con trỏ),auto;

all-scroll

auto

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
      div{
        padding:50px;
        border:1px solid black;
        font-size:20px;
        cursor:url(../image/con-tro-hinh-anh.png),auto;
      }
   </style>
</head>
<body>
    <div>Dí chuột phải đây để xem kiểu con trỏ của phần tử</div>
</body>
</html>

cell