Thuộc tính cursor trong CSS

Thuộc tính cursor trong CSS

Thuộc tính cursor trong CSS dùng để tạo ra các hiệu ứng khi rê chuột vào một phần tử HTML, mỗi hiệu ứng thường gắn liền với một chức năng, chi tiết như nào hãy cùng chúng tôi phân tích:

Chức năng của Thuộc tính cursor trong CSS

Thuộc tính cursor trong CSS dùng để tạo ra các hiệu ứng khi rê chuột vào một phần tử HTML, mỗi hiệu ứng thường gắn liền với một chức năng nào đó.

Cú pháp của Thuộc tính cursor trong CSS

cursor: giatri;

giatri: Giá trị để tạo ra các hiệu ứng khi rê chuột vào một phần tử HTML (Ví dụ: alias, all-scroll,...)

Code Thuộc tính cursor trong CSS

cursor:alias
cursor:all-scroll
cursor:auto
cursor:cell
cursor:col-resize
cursor:context-menu
cursor:copy
cursor:crosshair
cursor:default
cursor:e-resize
cursor:ew-resize
cursor:grab
cursor:grabbing
cursor:help
cursor:move
cursor:n-resize
cursor:ne-resize
cursor:nesw-resize
cursor:ns-resize
cursor:nw-resize
cursor:nwse-resize
cursor:no-drop
cursor:none
cursor:not-allowed
cursor:pointer
cursor:progress
cursor:row-resize
cursor:s-resize
cursor:se-resize
cursor:sw-resize
cursor:text
cursor:url
cursor:w-resize
cursor:wait
cursor:zoom-in;
cursor:zoom-out;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính cursor trong CSS</title>
<style>
span{display: block;margin-bottom:10px}
span:hover{color:red}
</style>
</head>
<body>

<h1>Code Thuộc tính cursor trong CSS</h1>

<p>Dùng để tạo ra các hiệu ứng khi rê chuột vào một phần tử HTML, mỗi hiệu ứng thường gắn liền với một chức năng nào đó:</p>

<span style="cursor:alias">cursor:alias</span>
<span style="cursor:all-scroll">cursor:all-scroll</span>
<span style="cursor:auto">cursor:auto</span>
<span style="cursor:cell">cursor:cell</span>
<span style="cursor:col-resize">cursor:col-resize</span>
<span style="cursor:context-menu">cursor:context-menu</span>
<span style="cursor:copy">cursor:copy</span>
<span style="cursor:crosshair">cursor:crosshair</span>
<span style="cursor:default">cursor:default</span>
<span style="cursor:e-resize">cursor:e-resize</span>
<span style="cursor:ew-resize">cursor:ew-resize</span>
<span style="cursor:grab">cursor:grab</span>
<span style="cursor:grabbing">cursor:grabbing</span>
<span style="cursor:help">cursor:help</span>
<span style="cursor:move">cursor:move</span>
<span style="cursor:n-resize">cursor:n-resize</span>
<span style="cursor:ne-resize">cursor:ne-resize</span>
<span style="cursor:nesw-resize">cursor:nesw-resize</span>
<span style="cursor:ns-resize">cursor:ns-resize</span>
<span style="cursor:nw-resize">cursor:nw-resize</span>
<span style="cursor:nwse-resize">cursor:nwse-resize</span>
<span style="cursor:no-drop">cursor:no-drop</span>
<span style="cursor:none">cursor:none</span>
<span style="cursor:not-allowed">cursor:not-allowed</span>
<span style="cursor:pointer">cursor:pointer</span>
<span style="cursor:progress">cursor:progress</span>
<span style="cursor:row-resize">cursor:row-resize</span>
<span style="cursor:s-resize">cursor:s-resize</span>
<span style="cursor:se-resize">cursor:se-resize</span>
<span style="cursor:sw-resize">cursor:sw-resize</span>
<span style="cursor:text">cursor:text</span>
<span style="cursor:url">cursor:url</span>
<span style="cursor:w-resize">cursor:w-resize</span>
<span style="cursor:wait">cursor:wait</span>
<span style="cursor:zoom-in">cursor:zoom-in</span>
<span style="cursor:zoom-out">cursor:zoom-out</span>
</body>
</html>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính cursor trong CSS.

  • ★★★★★ ★★★★★
  • 0 Bình luận
CEO Bùi Tấn Lực
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website
Chia sẻ nội dung đánh giá của bạn về Thuộc tính cursor trong CSS
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn