数据结构
网络
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 次查看
