Thuộc tính cursor 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>

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 và .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é.

Trong ví dụ trên, custom-cursor-pointer.gif và custom-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

Trên đây là bài viết của eLib.VN về thuộc tính cursor trong CSS. 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.