Cursor CSS là một kỹ thuật liên quan đến sự thay đổi của con trỏ chuột khi sử dụng trang web. Là một lập trình viên web, bạn có thể tìm hiểu về Cursor CSS để biết cách tự thiết lập hình dáng và hiệu ứng cho con trỏ chuột trên trang web của mình. Trong bài viết này, hãy cùng ITviec tìm hiểu tất tần tật về thuộc tính cursor CSS và các thao tác cơ bản nhé.

Đọc bài viết này để hiểu rõ:

  • Cursor CSS là gì
  • Phân biệt các loại cursor CSS phổ biến
  • 4 cách tạo kiểu con trỏ với thuộc tính cursor CSS

Cursor CSS là gì? Cú pháp mẫu của cursor CSS

Cursor CSS hay còn gọi là thuộc tính cursor trong CSS, được sử dụng để điều chỉnh hoặc thay đổi kiểu con trỏ của một phần tử HTML. Khi người dùng di chuyển con chuột vào phần tử đó, con trỏ sẽ thay đổi định dạng theo kiểu đã được thiết lập.

Ví dụ: Khi di chuột qua khu vực có thể chỉnh sửa văn bản, con trỏ có thể thay đổi thành hình dạng chữ I.

Để thay đổi con trỏ chuột cho một phần tử, bạn có thể thực hiện theo cú pháp như sau:

cursor: [<url> <x> <y>?,]*, [keyword_value,];

Trong đó:

  • cursor được sử dụng để thiết lập thuộc tính cursor cho phần tử.
  • [<url> <x> <y>?,]* gồm một danh sách tùy chọn các URL. Các phần tử trong danh sách này được sử dụng như các giá trị dự phòng nếu phần tử trước nó không hoạt động. <x> và <y> là các đối số tùy chọn sau mỗi URL đại diện cho khoảng cách đứng dọc và ngang của hình ảnh so với điểm chính giữa của con trỏ.
  • keyword_value là danh sách bắt buộc của một hoặc nhiều giá trị mặc định có sẵn của con trỏ. Thuộc tính sẽ dựa vào các giá trị này nếu không có URL hoặc tất cả URL không hoạt động.

Các giá trị Cursor CSS phổ biến và ý nghĩa của chúng

Phân loại

 Giá trị Hiển thị

Mô tả

Tổng quát

 auto Con trỏ chuột tự động thay đổi theo ngữ cảnh

default

 cursor css

Con trỏ chuột thường thấy
none

Con trỏ bị ẩn hoàn toàn khi di chuột qua phần tử. Người dùng sẽ không nhìn thấy bất kỳ phản hồi trực quan nào.
Liên kết và trạng thái context-menu cursor css Cho biết menu có sẵn
pointer cursor css

Cho biết liên kết có thể nhấp vào hoặc phần tử có thể tương tác

progress

 cursor css Cho biết một quá trình đang diễn ra (ví dụ: đang tải)
help cursor css

Cho biết thông tin trợ giúp có sẵn

wait

 cursor css

Hiển thị đồng hồ cát hoặc vòng quay, cho biết người dùng nên đợi

Lựa chọn

 crosshair cursor css Thường được sử dụng để biểu thị lựa chọn trong bitmap
text cursor css

Cho biết phần tử có chứa văn bản và có thể chỉnh sửa được

Thực hiện hành động

 move cursor css Gợi ý rằng phần tử có thể di chuyển được
not-allowed cursor css

Cho biết hành động bị cấm

alias

 cursor css Một bí danh hoặc lối tắt sẽ được tạo.
copy cursor css

Một phần tử nào đó có thể sao chép được

no-drop

 cursor css Không thể thả một phần tử ở vị trí này.
not-allowed cursor css

Hành động yêu cầu sẽ không được thực hiện

grab

 cursor css Một phần tử nào đó có thể kéo thả được
grabbing cursor css

Đang nắm (chọn để kéo thả) phần tử này

Thay đổi kích thước và cuộn trang

 col-resize cursor css Cho phép thay đổi kích thước cột tương ứng.
row-resize cursor css

Cho phép thay đổi kích thước hàng tương ứng.

4 cách tạo kiểu con trỏ với Cursor CSS

Cách tạo con trỏ tùy chỉnh bằng CSS 

Tạo con trỏ chuột tùy chỉnh với CSS là cách để tăng tính tương tác, thu hút sự chú ý của người dùng và tạo dấu ấn riêng cho website. Bạn có thể làm theo các bước sau:

  • Tự thiết kế một hình hoặc lấy một file hình ảnh có định dạng phổ biến như PNG, JPG, GIF và SVG để thay thế cho con trỏ mặc định.
  • Tiếp theo, sử dụng thuộc tính cursor trong CSS và trỏ nó đến vị trí của hình ảnh bằng cách sử dụng URL. Đường dẫn của hình ảnh có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối. Lúc này, thuộc tính cursor biết rằng nó cần sử dụng bất kỳ hình ảnh nào ở URL đó làm con trỏ. Tham khảo đoạn mã sau:
body {   
  cursor: url('path-to-image.png'), auto; 
}

Lưu ý: Để con trỏ có thể hiển thị trên toàn bộ trang web, vị trí tốt nhất để sử dụng thuộc tính cursor là trong thẻ body của HTML. Tuy nhiên, bạn vẫn có thể gán con trỏ tùy chỉnh cho các thành phần cụ thể thay vì toàn bộ trang web.

Tham khảo 70+ các thẻ trong HTML phổ biến nhất

Bạn có thể cung cấp nhiều hơn một con trỏ tùy chỉnh (nhiều dự phòng) cho trang web của mình để sử dụng. Tất cả những gì bạn cần làm là thêm đường dẫn của chúng vào thuộc tính cursor:

body {
  cursor: url('path-to-image.png'), url('path-to-image-2.svg'), url('path-to-image-3.jpeg'), auto;
}

Bạn cũng có thể thêm một giá trị dự phòng cho thuộc tính cursor. Khi sử dụng các thuộc tính CSS tùy chỉnh, giá trị này đảm bảo rằng nếu hình ảnh làm con trỏ tùy chỉnh của bạn bị thiếu hoặc không thể tải thì người dùng vẫn có tùy chọn khác.

Trong trường hợp này, auto là giá trị dự phòng cho thuộc tính cursor tùy chỉnh. Người dùng sẽ thấy con trỏ thông thường nếu con trỏ tùy chỉnh không khả dụng.

Cách thay đổi con trỏ thành pointer

Con trỏ pointer (biểu tượng bàn tay giơ ngón trỏ) thường được sử dụng để thể hiện khả năng nhấp chuột và tương tác với một phần tử HTML. Sử dụng con trỏ pointer cho các hàng trong bảng giúp người dùng dễ dàng nhận biết rằng họ có thể chọn hoặc click vào một hàng nào đó.

Giả sử bạn có một phần tử bảng và bạn muốn đổi con trỏ đổi pointer bất cứ khi nào người dùng di chuột qua một hàng trong bảng. Bạn có thể sử dụng thuộc tính cursor CSS theo cách sau:

<style>

  /* Kiểu cho bảng */

  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  /* Kiểu cho các ô bảng */

  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }

  /* Kiểu cho các hàng bảng */

  tr:hover {
    cursor: pointer;
  }

</style>

<table>

  <tr>
    <th>Tên</th>
    <th>Tuổi</th>
    <th>Thành phố</th>
  </tr>

  <tr>
    <td>John</td>
    <td>30</td>
    <td>New York</td>
  </tr>

  <tr>
    <td>Jane</td>
    <td>25</td>
    <td>Chicago</td>
  </tr>

  <tr>
    <td>Bill</td>
    <td>35</td>
    <td>Los Angeles</td>

  </tr>

</table>

Trong đoạn code trên, chúng ta sử dụng bộ chọn tr:hover để áp dụng thuộc tính cursor cho tất cả các hàng trong bảng khi chuột di chuyển qua chúng, và thuộc tính cursor được đặt thành pointer, giúp thay đổi con trỏ chuột thành biểu tượng bàn tay.

Cách ẩn con trỏ chuột bằng CSS

Để ẩn con trỏ chuột bằng CSS, bạn có thể sử dụng thuộc tính cursor và đặt giá trị của nó thành none. Ví dụ:

<style>
  /* Kiểu cho phần tử body */
  body {
    cursor: none;
  }
</style>

<body>
  <!-- Nội dung của bạn -->
</body>

Trong ví dụ trên, con trỏ chuột sẽ bị ẩn trên toàn bộ trang web. Nếu bạn chỉ muốn ẩn con trỏ chuột cho một phần tử cụ thể, bạn có thể áp dụng thuộc tính cursor cho phần tử riêng lẻ đó thay vì phần tử body.

Cách tạo con trỏ chuột tùy chỉnh với JavaScript

Tạo con trỏ chuột tùy chỉnh với JavaScript liên quan đến việc thao tác các thành phần DOM. Về cơ bản, chúng ta sẽ tạo một số thành phần DOM đóng vai trò như con trỏ chuột tùy chỉnh, sau đó sử dụng JavaScript để thao tác chúng. Lúc này, khi di chuyển con trỏ chuột xung quanh, các thành phần DOM đó sẽ di chuyển xung quanh như con trỏ chuột của chúng ta. 

Thay vì thiết kế và sử dụng một hình ảnh có sẵn, bạn có thể sử dụng JavaScript để thiết kế con trỏ chuột tùy chỉnh. 

Ví dụ để thiết kế con trỏ gồm hai phần tử – một hình tròn lớn và một hình tròn nhỏ như hình bên dưới:

Chúng ta sẽ tạo hai thẻ div và đặt cho chúng tên lớp (class):

<div class="cursor small"></div>

<div class="cursor big"></div>

Tiếp theo, bạn sẽ tạo các hình tròn bằng CSS. Trong đoạn mã dưới đây:

  • Mỗi hình trong lớp được gán chiều rộng và chiều cao là 50px với bán kính viền là 50%.
  • Hình tròn nhỏ có đường viền và bán kính viền là 50%, chiều rộng và chiều cao là 6px mỗi hình.
  • Khi này, hãy vô hiệu hóa con trỏ mặc định bằng cách đặt cursor thành none để hiển thị con trỏ tùy chỉnh ở vị trí của nó.
  • Bạn có thể thêm hoạt ảnh vào hình tròn lớn bằng cách sử dụng @keyframes.
  • Thời gian hoạt ảnh (animation-duration) là 2.0 giây. Vào đầu khoảng thời gian này, đặt background-color thành màu xanh lá cây và opacity thành 0.2. Giữa chừng, đặt background-color của hình tròn thành màu cam. Vào cuối khoảng thời gian 2 giây, đặt background-color của hình tròn thành màu đỏ.
  • Để làm cho hoạt ảnh lặp lại nhiều lần, đặt animation-iteration-count thành infinite.
body {
  background-color: #171717;  /* Màu nền xám tối */
  cursor: none;                 /* Ẩn con trỏ mặc định */
  height: 120vh;                /* Chiều cao bằng 120% viewport */
}

.small {
  width: 6px;
  height: 6px;
  border: 2px solid #fff;      /* Đường viền trắng 2px */
  border-radius: 50%;           /* Hình tròn */
}

.big {
  width: 50px;
  height: 50px;
  border-radius: 50%;           /* Hình tròn */
  margin-bottom: 20rem;        /* Khoảng cách dưới 20rem */
  animation-name: stretch;       /* Sử dụng animation stretch */
  animation-duration: 2.0s;      /* Thời gian hoạt ảnh 2 giây */
  animation-timing-function: ease-out; /* Kiểu hoạt ảnh: chậm dần ở cuối */
  animation-direction: alternate; /* Hoạt ảnh đảo chiều */
  animation-iteration-count: infinite; /* Lặp vô hạn */
  animation-play-state: running;  /* Bắt đầu chạy hoạt ảnh ngay */
}

@keyframes stretch {
  0% {
    opacity: 0.2;
    background-color: green;
    border-radius: 100%;  /* Bắt đầu với hình tròn xanh trong mờ */
  }

  50% {
    background-color: orange;  /* Giữa chuyển sang màu cam */
  }

  100% {
    background-color: red;    /* Kết thúc chuyển sang màu đỏ */
  }
}

Bây giờ, để làm cho các thành phần di chuyển theo khi bạn di chuột, hãy sử dụng JavaScript.

const cursorSmall = document.querySelector('.small');
const cursorBig = document.querySelector('.big');
const positionElement = (e)=> {
  const mouseY = e.clientY;
  const mouseX = e.clientX;
  cursorSmall.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
  cursorBig.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}
window.addEventListener('mousemove', positionElement)

Một số câu hỏi thường gặp về cursor CSS

Cursor CSS có thể cải thiện tương tác của người dùng trên trang web không?

Có, cursor CSS có thể cải thiện đáng kể sự tương tác của người dùng trên các trang web. Bằng cách thay đổi kiểu con trỏ, bạn cung cấp cho người dùng các tín hiệu trực quan về loại hành động họ có thể thực hiện. Ví dụ, con trỏ chuột dạng “bàn tay” cho biết đó là một liên kết có thể nhấp được, trong khi con trỏ dạng “chữ I” gợi ý rằng văn bản có thể được chọn hoặc chỉnh sửa.

Sử dụng kiểu con trỏ có thể giúp trang web trực quan và thân thiện với người dùng hơn. Tuy nhiên, việc sử dụng quá nhiều con trỏ chuột tùy chỉnh có thể gây nhầm lẫn cho người dùng, vì vậy điều cần thiết là sử dụng chúng một cách hợp lý.

Con trỏ tùy chỉnh có được hỗ trợ bởi tất cả các trình duyệt không?

Tất cả các trình duyệt chính như Chrome, Firefox, Safari và Edge đều hỗ trợ các bộ kiểu con trỏ cơ bản như “con trỏ”, “chữ I” và “chờ đợi”. Khi sử dụng con trỏ hình ảnh tùy chỉnh, quan trọng nhất là bạn cần kiểm tra tính tương thích trên các trình duyệt khác nhau và đưa ra các tuỳ chọn con trỏ dự phòng.

Ngoài ra, cần lưu ý rằng con trỏ chuột tùy chỉnh có thể hiển thị khác nhau về kích thước và chất lượng trên các trình duyệt.

Làm cách nào để đặt kiểu con trỏ cho các phần tử bị vô hiệu hóa trong CSS?

Thiết lập kiểu con trỏ cho các phần tử bị vô hiệu hóa trong CSS giúp cải thiện trải nghiệm người dùng bằng cách chỉ ra các khu vực không thể tương tác.

Thông thường, con trỏ not-allowed (bị cấm) được sử dụng cho mục đích này. Áp dụng kiểu này giúp người dùng hiểu rõ rằng một số phần tử nhất định, chẳng hạn như nút hoặc liên kết bị vô hiệu hóa, hiện đang không hoạt động. Trong CSS, điều này có thể được thực hiện bằng cách chọn các phần tử bị vô hiệu hóa và đặt cursor: not-allowed;.

Thay đổi nhỏ nhưng hiệu quả này cải thiện tổng thể khả năng truy cập và tính thân thiện của trang web, đảm bảo người dùng không nhấp vào các phần tử không phản hồi.

Tổng kết

Như vậy, ITviec đã cùng bạn khám phá chức năng của thuộc tính cursor trong CSS. Hãy tận dụng tính linh hoạt của nó để biến hóa hình dạng con trỏ chuột, giúp trang web của bạn trở nên sinh động hơn, tạo nên trải nghiệm tương tác thu hút, khơi gợi hứng thú và giữ chân người dùng hiệu quả.

robby-2

Bạn thấy bài viết hay và hữu ích? Đừng ngại Share với bạn bè và đồng nghiệp nhé.

Và nhanh tay tham khảo việc làm IT “chất” trên ITviec!