資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 設定瀏覽器游標樣式？
通常，任何瀏覽器視窗上的游標預設情況下都是箭頭型別。但是，您可以根據自己的需要將游標樣式或型別更改為任何樣式，適用於任何型別的文字。CSS 中提供了許多可供選擇的游標樣式選項，您可以使用這些選項來設定游標樣式，例如指標、放大、縮小等。您還可以使用任何影像或圖示作為游標樣式值，將游標樣式更改為影像。CSS 提供了一個游標屬性，我們可以使用它來使用 CSS 設定瀏覽器上的游標樣式。
現在讓我們詳細瞭解游標屬性的用法，並透過實踐將其應用於更改瀏覽器上的游標樣式。
語法
以下語法將向您展示如何使用 CSS 中的游標屬性更改游標樣式：
cursor: value;
現在讓我們透過程式碼示例在實踐中實現它並詳細瞭解它。
步驟
步驟 1 - 在第一步中，我們將在 HTML 文件中定義一個父容器，它將包含其中的所有其他元素。
步驟 2 - 在下一步中，我們將在上一步中定義的元素內部定義不同的 div 元素，併為它們關聯類。
步驟 3 - 在最後一步中，我們將使用它們的類獲取元素，並使用 CSS 的游標屬性為每個元素定義不同的游標樣式。
示例
以下示例將解釋使用 CSS 的游標屬性更改瀏覽器游標樣式的用法：
<!DOCTYPE html>
<html>
<head>
<style>
.outer-div {
display: flex;
border: 2px solid red;
}
.inner-div {
border: 1px solid green;
margin: 5px;
padding: 5px;
}
.inner-div1 {
cursor: pointer;
}
.inner-div2 {
cursor: zoom-in;
}
.inner-div3 {
cursor: zoom-out;
}
.inner-div4 {
cursor: grab;
}
.inner-div5 {
cursor: progress;
}
</style>
</head>
<body>
<center>
<h2>Set the cursor style on browser using CSS</h2>
<p>The below div containers contains the cursor property with different type of styles.</p>
<div class = "outer-div">
<div class = "inner-div inner-div1"> This container contains the cursor style of type pointer. </div>
<div class = "inner-div inner-div2"> This container contains the cursor style of type zoom-in. </div>
<div class = "inner-div inner-div3"> This container contains the cursor style of type zoom-out. </div>
<div class = "inner-div inner-div4"> This container contains the cursor style of type grab. </div>
<div class = "inner-div inner-div5"> This container contains the cursor style of type progress. </div>
</div>
</center>
</body>
</html>
在上面的示例中，我們使用了不同數量的 div 元素來顯示不同型別的 cursor 屬性樣式。我們為每個內部 div 元素使用具有不同值的 cursor 屬性來檢視瀏覽器上游標樣式的變化。
讓我們再看一個程式碼示例，在這個示例中，我們將使用影像作為 cursor 屬性的值，並將游標樣式更改為該影像。
此示例的演算法與上一個示例幾乎相同。您只需要使用 url() 方法更改 cursor 屬性值中定義的游標樣式，並將其分配給影像 URL。
示例
以下示例將說明如何使用 CSS 中的 url() 方法將影像設定為游標樣式並更改游標樣式：
<!DOCTYPE html>
<html>
<head>
<style>
.outer-div {
display: flex;
border: 2px solid red;
}
.inner-div {
border: 1px solid green;
margin: 5px;
padding: 5px;
}
.inner-div1 {
cursor: url("http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif"), auto;
}
.inner-div2 {
cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg"), auto;
}
</style>
</head>
<body>
<center>
<h2>Setting the cursor style on browser using CSS</h2>
<p>The below div containers contains the cursor property with different type of styles.</p>
<div class = "outer-div">
<div class = "inner-div inner-div1">This container contains the cursor style as a image.</div>
<div class = "inner-div inner-div2">This container also contains the cursor style as a image.</div>
</div>
</center>
</body>
</html>
在此示例中，我們看到了如何使用 url() 方法將游標樣式更改為影像以設定值。我們使用了指標游標，以便將手形影像作為 cursor 屬性影像值用於第一個 div 容器。而對於第二個 div，我們使用心形影像作為瀏覽器上的游標樣式，使用相同的方法使用 url() 方法設定值。
結論
在本文中，我們瞭解瞭如何更改瀏覽器上的游標樣式。我們藉助兩個不同的程式碼示例詳細討論了它。在前者中，我們將游標樣式更改為 CSS 提供的簡單型別，例如指標、抓取進度等，而在後者中，我們使用了兩個不同的影像來設定游標樣式，使用 url() 方法將值設定為 cursor 屬性。
75 次檢視
