Làm cách nào để thay đổi con trỏ chuột từ mũi tên sang bàn tay trong CSS?

Question

Khi chúng tôi truy cập bất kỳ trang web nào, chúng tôi thường thấy rằng khi con trỏ di chuyển qua các liên kết, nó sẽ chuyển thành con trỏ tay. Điều này được sử dụng để cho người dùng biết rằng đó là các liên kết có thể nhấp được. Trong hướng dẫn này, chúng ta sẽ học cách thay đổi con trỏ chuột thành con trỏ tay khi di chuột bằng CSS

Nội dung chính Show

Thay đổi con trỏ thành con trỏ tay khi di chuột
Ví dụ. Thay đổi con trỏ thành con trỏ tay
Ví dụ. Thay đổi con trỏ thành con trỏ mặc định
Phần kết luận
Hỗ trợ trình duyệt
Cú pháp CSS
Giá trị tài sản
Làm cách nào để đặt con trỏ trong CSS?
Tại sao con trỏ của tôi biến thành bàn tay?

Thay đổi con trỏ thành con trỏ tay khi di chuột

Chúng ta có thể thay đổi con trỏ thành con trỏ tay bằng cách sử dụng thuộc tính CSS cursor. Sử dụng giá trị pointer để thay đổi con trỏ thành con trỏ tay

Ví dụ. Thay đổi con trỏ thành con trỏ tay

Trong ví dụ này, chúng tôi đã thêm cursor:pointer vào thẻ <li> để thay đổi con trỏ thành con trỏ tay

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<style>   
   li {
     cursor: pointer;
	 background: #ff4455;
	 display: inline-block;
	 font-size: 25px;
   }   
</style>
<body>
    <h2> change cursor into hand cursor</h2>
	<ul class="container">
		<li href="#">Home </li>
		<li href="#">course </li>
		<li href="#">study material</li>
	</li>	
</body>
</html>

đầu ra

Đây là đầu ra của chương trình trên

Ví dụ. Thay đổi con trỏ thành con trỏ mặc định

Chúng ta cũng có thể thay đổi con trỏ tay thành con trỏ mặc định bằng cách sử dụng con trỏ. thuộc tính mặc định. Thẻ neo sử dụng con trỏ con trỏ. Nhưng chúng tôi đã thay đổi nó thành con trỏ mặc định

Phần kết luận

Như vậy đến đây, chúng ta đã học cách thay đổi con trỏ chuột thành con trỏ tay khi di chuột bằng CSS. Con trỏ. thuộc tính con trỏ được sử dụng để thay đổi con trỏ thành con trỏ tay. Chúng ta cũng có thể thay đổi con trỏ tay thành con trỏ mặc định

Giá trị mặc định. tự động kế thừa. vângCó thể hoạt hình. không. Đọc về animatableVersion. Cú pháp CSS2JavaScript. vật. Phong cách. con trỏ = "chữ thập" Hãy thử nó

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính

con trỏ thuộc tính5. 05. 54. 05. 09. 6

Cú pháp CSS

Giá trị tài sản

Giá trị Mô tảDemoaliasCon trỏ cho biết bí danh của nội dung nào đó sẽ được tạoPhát nó »cuộn toàn bộCon trỏ cho biết rằng nội dung nào đó có thể được cuộn theo bất kỳ hướng nàoPhát nó »autoDefault. Trình duyệt đặt con trỏ Phát » ôCon trỏ cho biết một ô (hoặc tập hợp các ô) có thể được chọn Phát » thay đổi kích thước cột Con trỏ cho biết cột có thể được thay đổi kích thước theo chiều ngangPhát » menu ngữ cảnh Con trỏ cho biết có sẵn menu ngữ cảnhPhát . Ghi chú. Luôn chỉ định một con trỏ chung ở cuối danh sách, trong trường hợp không thể sử dụng con trỏ do URL xác định Phát nó »văn bản dọc Con trỏ cho biết văn bản dọc có thể được chọn Phát nó »w-thay đổi kích thước Con trỏ cho biết rằng một cạnh của một . Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế

Làm cách nào để đặt con trỏ trong CSS?

Phương pháp 1. Sử dụng một lớp CSS cho các liên kết . Thuộc tính con trỏ được sử dụng để chỉ định con trỏ chuột sẽ được hiển thị khi con chuột được trỏ qua một phần tử. Việc sử dụng giá trị 'con trỏ' trong thuộc tính này sẽ thay đổi con trỏ thành 'con trỏ' biểu thị liên kết .