Thuộc tính cursor trong CSS

“Hãy hòa nhã với những kẻ dở hơi. Ai biết được ngày sau bạn có thể phải làm việc cho một kẻ như vậy.”

Bill Gates

Microsoft
Thuộc tính Cursor trong CSS
Thuộc tính Cursor trong CSS

Thuộc tính cursor trong CSS được sử dụng để xác định loại con trỏ (tức là con trỏ chuột) khi chuột di chuyển qua một khu vực nhất định hoặc qua một liên kết trên trang web.

Hãy cùng mình học để tùy chỉnh con trỏ trong CSS, tạo ra con trỏ phù hợp, ấn tượng cho riêng mình nhé.

Thay đổi các kiểu con trỏ trong CSS

Các trình duyệt thường hiển thị con trỏ chuột kiểu mũi tên trên bất kỳ phần trống nào của trang web, kiểu bàn tay có găng tay trên bất kỳ mục nào được liên kết hoặc có thể click và con trỏ kiểu chỉnh sửa (hình chữ I) trên bất kỳ đoạn văn bản nào.

Với CSS, bạn có thể xác định lại các thuộc tính đó để hiển thị nhiều loại con trỏ khác nhau.

Đây là các loại con trỏ, chạy nó trên trình duyệt và di chuột qua để thấy các kiểu con trỏ khác nhau bạn nhé:

Mình CSS các ô để test kiểu con trỏ một chút

CSS:

.cursor-demo span{
    min-width: 100px;
    padding: 5px 10px;
    margin-bottom: 5px;
    display: inline-block;
    border: 1px solid grey;
    border-radius: 3px;
}

HTML:

<h2>Các loại con trỏ có sẵn trong CSS</h2>
<p>Di chuột qua các ô để thấy sự thay đổi của con trỏ.</p>
<div class="cursor-demo">
    <span style="cursor: auto;">auto</span>
    <span style="cursor: default;">default</span>
    <span style="cursor: none;">none</span>
    <span style="cursor: context-menu;">context-menu</span>
    <span style="cursor: help;">help</span>
    <span style="cursor: pointer;">pointer</span>
    <span style="cursor: progress;">progress</span>
    <span style="cursor: wait;">wait</span>
    <span style="cursor: cell;">cell</span>
    <span style="cursor: crosshair;">crosshair</span>
    <span style="cursor: text;">text</span> 
    <span style="cursor: vertical-text;">vertical-text</span>
    <span style="cursor: alias;">alias</span>
    <span style="cursor: copy;">copy</span>
    <span style="cursor: move;">move</span>
    <span style="cursor: no-drop;">no-drop</span>
    <span style="cursor: not-allowed;">not-allowed</span>
    <span style="cursor: grab;">grab</span>
    <span style="cursor: grabbing;">grabbing</span>
    <span style="cursor:e-resize">e-resize</span>
    <span style="cursor: n-resize;">n-resize</span>
    <span style="cursor: ne-resize;">ne-resize</span>
    <span style="cursor: nw-resize;">nw-resize</span>
    <span style="cursor: s-resize;">s-resize</span>
    <span style="cursor: se-resize;">se-resize</span>
    <span style="cursor: sw-resize;">sw-resize</span>
    <span style="cursor: w-resize;">w-resize</span>
    <span style="cursor: ew-resize;">ew-resize</span>
    <span style="cursor: ns-resize;">ns-resize</span>
    <span style="cursor: nesw-resize;">nesw-resize</span>
    <span style="cursor: nwse-resize;">nwse-resize</span>
    <span style="cursor: col-resize;">col-resize</span>
    <span style="cursor: row-resize;">row-resize</span>
    <span style="cursor: all-scroll;">all-scroll</span>
    <span style="cursor: zoom-in;">zoom-in</span>
    <span style="cursor: zoom-out;">zoom-out</span>
</div>

Tạo con trỏ tùy chỉnh trong CSS

Ngoài các con trỏ có sẵn, bạn cũng có thể tạo ra con trỏ tùy chỉnh theo ý của bạn.

Thuộc tính cursor trong CSS xử lý danh sách được phân tách bằng dấu phẩy gồm các giá trị con trỏ do người dùng xác định, theo sau là con trỏ chung.

Nếu con trỏ đầu tiên được chỉ định không chính xác hoặc không thể tìm thấy, con trỏ tiếp theo trong danh sách được phân tách bằng dấu phẩy sẽ được sử dụng, v.v. cho đến khi tìm thấy con trỏ có thể sử dụng.

Nếu không có con trỏ nào do người dùng xác định là hợp lệ hoặc được hỗ trợ bởi trình duyệt, thì con trỏ chung ở cuối danh sách sẽ được sử dụng thay thế.

Mẹo: Định dạng chuẩn có thể được sử dụng cho con trỏ là định dạng .cur. Tuy nhiên, bạn có thể chuyển đổi các hình ảnh như .jpg.gif sang định dạng .cur bằng cách sử dụng phần mềm chuyển đổi hình ảnh.

Ví dụ:

HTML:

<p>Hãy thử <a href="#">Di chuột qua đây</a> để thấy sự thay đổi của con trỏ chuột.</p>

CSS:

a {
    cursor: url("/images/custom-cursor-pointer.gif"), url("/images/custom-cursor-pointer.cur"), default;
}

Bạn tạo một thư mục tên là images cùng cấp với file .css và lưu 2 file con trỏ vào thư mục đó nhé. (Tải file con trỏ trên DRIVE)

Trong ví dụ trên, custom-cursor-pointer.gifcustom-cursor-point.cur là tệp con trỏ tùy chỉnh, nó được tải lên vùng máy chủ của bạn và default là con trỏ chung sẽ được sử dụng nếu không tìm thấy con trỏ tùy chỉnh hoặc không được trình duyệt của người xem hỗ trợ.

Chú ý: Nếu bạn đang khai báo con trỏ tùy chỉnh, bạn phải xác định một con trỏ chung ở cuối danh sách, nếu không con trỏ tùy chỉnh sẽ không hiển thị chính xác.

Lưu ý: IE9 và các phiên bản trước đó chỉ hỗ trợ các giá trị URL thuộc loại .cur cho con trỏ tĩnh và .ani cho con trỏ động. Tuy nhiên, các trình duyệt như Firefox, Chrome và Safari có hỗ trợ .cur, .png, .gif và .jpg nhưng không hỗ trợ .ani

Như vậy, qua bài viết này bạn đã có thể tự mình tạo ra những con trỏ xịn sò cho riêng mình với thuộc tính cursor trong CSS rồi đấy. Một điểm nhấn, nếu làm tốt thì sẽ gây ấn tượng mạnh với người dùng của bạn.

TIP: Dĩ nhiên, thông thường chúng ta sử dụng mặc định của trình duyệt để tránh tạo ra nhiều request khiến hiệu năng chậm đi.

Học tiếp: Thuộc tính overflow trong CSS

Đọc thêm: Thuộc tính Outline trong CSS

Có thể bạn muốn xem

Pesudo Element trong CSS

Sử dụng phần tử giả (Pesudo element) trong CSS là một cách để áp dụng các quy tắc CSS cho phần tử không xác định vị trí trong DOM tree.

Pesudo class trong CSS

Bộ chọn lớp giả CSS (Pesudo class Selector) khớp với các thành phần dựa trên một điều kiện bổ sung và không nhất thiết phải được định nghĩa trong DOM tree.

Leave a reply

Please enter your comment!
Please enter your name here