VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

Con trỏ trong CSS


Thuộc tính padding trong CSS
Thuộc tính outline trong CS

Nội dung chính

  • Thuộc tính cursor trong CSS
  • Ví dụ thuộc tính cursor trong CSS

Thuộc tính cursor trong CSS

Thuộc tính cursor trong CSS giúp bạn xác định kiểu con trỏ hiển thị tới người dùng.

Một cách sử dụng phổ biến của thuộc tính này là sử dụng các hình ảnh làm con trỏ hiển thị trong các nút submit trên các form. Theo mặc định, khi con trỏ hover qua một link, thì con trỏ chuột thay đổi từ dạnh con trỏ thành hình dạng một bàn tay.

Bảng dưới đây liệt kê các giá trị mà thuộc tính cursor có thể nhận:

Giá trị Mô tả
auto Hình dáng của con trỏ phụ thuộc vào context mà nó di chuyển qua. Ví dụ, dạng một chữ I khi di chuyển qua văn bản hay một bàn tay khi di chuyển qua một link, ….
crosshair Dạng crosshair hoặc dấu cộng
default Một mũi tên
pointer Hình dạng một bàn tay
move Thanh I
e-resize Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
ne-resize Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
nw-resize Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
n-resize Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
se-resize Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
sw-resize Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
s-resize Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
w-resize Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
text Thanh I
wait Hình dáng giống chiêc đồng hồ cát, chỉ rằng đang chờ xử lý
help Một dấu chấm hỏi (?), sử dụng giá trị này cho các nút Help
<url> Nguồn tới file chứa hình ảnh con trỏ
Ghi chú: Bạn nên thực hành với từng giá trị thuộc tính trên để đỡ nhầm lần trong khi sử dụng và cũng giúp cho bạn hiển thị hình dáng con trỏ chuột thích hợp tới người sử dụng. Chẳng hạn, nếu một người sử dụng di chuyển chuột vào một link, bạn lại hiển thị con trỏ chuột dạng đồng hồ cát mà biểu thị rằng đang chờ xử lý, thì đó là sự nhầm lẫn khá khôi hài.

Ví dụ thuộc tính cursor trong CSS

Dưới đây là ví dụ minh họa cách sử dụng các giá trị của thuộc tính cursor trong CSS.


<html>
<head>
<meta charset="UTF-8">
</head>

<body>
  <p>
  Di chuyển con trỏ qua các văn bản sau 
  để thấy hình dáng con trỏ:
  </p>
  
  <div style="cursor:auto">Kiểu auto</div>
  <div style="cursor:crosshair">Kiểu crosshair</div>
  <div style="cursor:default">Kiểu default</div>
  <div style="cursor:pointer">Kiểu pointer</div>
  <div style="cursor:move">Kiểu move</div>
  <div style="cursor:e-resize">Kiểu e-resize</div>
  <div style="cursor:ne-resize">Kiểu ne-resize</div>
  <div style="cursor:nw-resize">Kiểu nw-resize</div>
  <div style="cursor:n-resize">Kiểu n-resize</div>
  <div style="cursor:se-resize">Kiểu se-resize</div>
  <div style="cursor:sw-resize">Kiểu sw-resize</div>
  <div style="cursor:s-resize">Kiểu s-resize</div>
  <div style="cursor:w-resize">Kiểu w-resize</div>
  <div style="cursor:text">Kiểu text</div>
  <div style="cursor:wait">Kiểu wait</div>
  <div style="cursor:help">Kiểu help</div>
</body>
   
</html> 

Kết quả:


Thuộc tính padding trong CSS
Thuộc tính outline trong CS

Recent Updates

Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSSSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml