Chúng tôi có thể tạo hình ảnh con trỏ tùy chỉnh với các phần mở rộng như .cur (cho Internet Explorer), .gif và .png (cho Chrome, Firefox, Safari) và áp dụng nó cho một phần tử bằng cách sử dụng thuộc tính con trỏ CSS và đặt nó thành url và trong thêm một giá trị con trỏ chung như tự động, mặc định, con trỏ, v.v.
Giải pháp
Selector {
cursor: url("/*path to custom cursor file*/"), generic cursor;
} Ví dụ
Hãy xem cách tạo con trỏ tùy chỉnh với một ví dụ -
<!DOCTYPE html>
<html>
<head>
<title>Custom Cursor Using CSS</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#tech1 {
cursor: url("https://www.tutorialspoint.com/images/dbms.png"), auto;
}
#tech2 {
cursor: url("https://www.tutorialspoint.com/images/Python.png"), auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Custom Cursor Using CSS</legend>
<h1>Learn</h1>
<input type="button" id="tech1" value="DBMS">
<input type="button" id="tech2" value="Python">
</fieldset>
</form>
</body></html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
Di chuột qua ‘DBMS’ nút -
Di chuột qua ‘Python’ nút -
