如何在悬停时更改超链接的光标
超链接的默认光标是“指针”。
要更改它，我们需要使用 CSS :hover 选择器为 <a> 元素指定光标类型。
在我们的示例中，我们仅设置“链接”类的样式。
将“指针”更改为“默认”的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.link:hover {
cursor: default;
}
</style>
</head>
<body>
<h4>
将鼠标悬停在超链接上，查看“指针”如何更改为“默认值”：
</h4>
<p>
<a href="https://www.onitroad.com">onitroad</a>
使用初始化类型
</p>
<p>
<a class="link" href="https://www.onitroad.com">onitroad</a>
将光标改成默认类型
</p>
</body>
</html>
由于链接默认为蓝色和下划线，我们建议更改链接颜色并进一步使用超链接。
查看如何使用 CSS 更改链接颜色文章，了解如何使用链接进行更多操作。
在超链接上使用“抓取”光标类型的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
a {
cursor: grab;
}
</style>
</head>
<body>
<a href="https://www.onitroad.com/" aria-label="onitroad homepage">
<img src="/cursor.png" width="190" height="45" alt="logo" />
</a>
</body>
</html>
几乎所有都在更改光标以获得更好的用户体验或者只是为了好玩。
自定义光标是一种在需要时为添加另外功能的简单方法。
要指定光标外观，请使用 CSS cursor 属性，该属性用于更改元素上的鼠标光标类型。
它在需要执行不同操作而不仅仅是单击的中很有用。
我们将介绍以下管理游标可用性的方法：
- 当用户将鼠标悬停在列表项上时如何使光标成为手
- 如何在悬停时更改超链接的光标
- 如何在元素上自定义光标图像效果
- 所有光标类型示例
当用户将鼠标悬停在列表项上时如何使光标成为手
如果我们想在将鼠标悬停在列表项上时将鼠标指针更改为手形指针，我们可以为列表项 (<li>) 设置一个类并仅为该列表项定义样式。
但是，如果我们想为所有列表项设置一个手形指针，只需设置 <li> 元素的样式即可。
现在让我们看一个使用 cursor 属性的“pointer”值将鼠标指针更改为手形指针的示例。
我们仅在“指针”类上设置该游标类型。
将鼠标指针更改为手形指针的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
li {
margin-bottom: 15px;
}
li.pointer {
cursor: pointer;
}
li:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<h4>将鼠标悬停在列表项上，查看默认光标如何变为指针：</h4>
<ul>
<li>使用默认光标列出项目1</li>
<li class=“pointer”>用指针光标列出项目2</li>
<li>另一个带有默认鼠标光标的列表项</li>
</ul>
</body>
</html>
将鼠标悬停在列表项上以查看默认光标如何变为指针：
- 使用默认光标列出项目 1.
- 使用指针光标列出项目 2.
- 另一个带有默认鼠标光标的列表项。
在下一个示例中，使用 :nth-child 选择器。
其中我们使用 nth-child(odd) 作为游标：进度；和 nth-child(even) 用于光标：指针；在不同的列表项上有不同的光标类型。
使用指针和进度游标的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
li:nth-child(odd) {
background: #1c87c9;
cursor: progress;
width: 50%;
padding: 5px;
}
li:nth-child(even) {
background: #ccc;
cursor: pointer;
width: 50%;
padding: 5px;
}
</style>
</head>
<body>
<p>将光标悬停在列表项上以查看光标的变化：</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
</ul>
</body>
</html>
所有光标类型示例
这里有一个例子，它包含一个游标可以拥有的所有可能的类型。
对于“放大”、“缩小”、“抓取”和“抓取”值，添加了 -webkit- 属性扩展。
使用所有游标类型的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
text-align: center;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.cursor {
display: flex;
flex-wrap: wrap;
}
.cursor > div {
flex: 120px;
padding: 10px 2px;
white-space: nowrap;
border: 1px solid #666;
border-radius: 5px;
margin: 0 5px 5px 0;
}
.cursor > div:hover {
background: #1c87c9;
}
.auto {
cursor: auto;
}
.default {
cursor: default;
}
.none {
cursor: none;
}
.context-menu {
cursor: context-menu;
}
.help {
cursor: help;
}
.pointer {
cursor: pointer;
}
.progress {
cursor: progress;
}
.wait {
cursor: wait;
}
.cell {
cursor: cell;
}
.crosshair {
cursor: crosshair;
}
.text {
cursor: text;
}
.vertical-text {
cursor: vertical-text;
}
.alias {
cursor: alias;
}
.copy {
cursor: copy;
}
.move {
cursor: move;
}
.no-drop {
cursor: no-drop;
}
.not-allowed {
cursor: not-allowed;
}
.all-scroll {
cursor: all-scroll;
}
.col-resize {
cursor: col-resize;
}
.row-resize {
cursor: row-resize;
}
.n-resize {
cursor: n-resize;
}
.e-resize {
cursor: e-resize;
}
.s-resize {
cursor: s-resize;
}
.w-resize {
cursor: w-resize;
}
.ns-resize {
cursor: ns-resize;
}
.ew-resize {
cursor: ew-resize;
}
.ne-resize {
cursor: ne-resize;
}
.nw-resize {
cursor: nw-resize;
}
.se-resize {
cursor: se-resize;
}
.sw-resize {
cursor: sw-resize;
}
.nesw-resize {
cursor: nesw-resize;
}
.nwse-resize {
cursor: nwse-resize;
}
.grab {
cursor: -webkit-grab;
cursor: grab;
}
.grabbing {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.zoom-in {
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
.zoom-out {
cursor: -webkit-zoom-out;
cursor: zoom-out;
}
</style>
</head>
<body>
<h2>Cursor 属性示例</h2>
<p>将鼠标光标悬停在元素上以查看更改：</p>
<div class="cursor">
<div class="auto">auto</div>
<div class="default">default</div>
<div class="none">none</div>
<div class="context-menu">context-menu</div>
<div class="help">help</div>
<div class="pointer">pointer</div>
<div class="progress">progress</div>
<div class="wait">wait</div>
<div class="cell">cell</div>
<div class="crosshair">crosshair</div>
<div class="text">text</div>
<div class="vertical-text">vertical-text</div>
<div class="alias">alias</div>
<div class="copy">copy</div>
<div class="move">move</div>
<div class="no-drop">no-drop</div>
<div class="not-allowed">not-allowed</div>
<div class="all-scroll">all-scroll</div>
<div class="col-resize">col-resize</div>
<div class="row-resize">row-resize</div>
<div class="n-resize">n-resize</div>
<div class="s-resize">s-resize</div>
<div class="e-resize">e-resize</div>
<div class="w-resize">w-resize</div>
<div class="ns-resize">ns-resize</div>
<div class="ew-resize">ew-resize</div>
<div class="ne-resize">ne-resize</div>
<div class="nw-resize">nw-resize</div>
<div class="se-resize">se-resize</div>
<div class="sw-resize">sw-resize</div>
<div class="nesw-resize">nesw-resize</div>
<div class="nwse-resize">nwse-resize</div>
<div class="grab">grab</div>
<div class="grabbing">grabbing</div>
<div class="zoom-in">zoom-in</div>
<div class="zoom-out">zoom-out</div>
</div>
</body>
</html>
如何在元素上自定义光标图像效果
让我们用游标玩得更开心！可以在网页上添加图像作为光标。
我们只需要通过将其 URL 指定为光标属性的值来添加图像。
请记住将光标类型设置为在浏览器无法使用提供的图像时显示。
否则，代码将无法工作。
当用户不希望看到这样的事情时，这是一个有趣的技巧，可以添加到。
想象一下，我们有一个表单，其中的答案对应于特定的情绪，这里是使用表情符号图像的理想场所。
添加图像作为光标的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
background: #eee;
text-align: center;
}
button {
display: inline-block;
background-color: #1c87c9;
color: #eee;
margin: 25px;
position: relative;
width: 140px;
height: 45px;
border-radius: 3px;
border: none;
font-size: 1.5em;
text-align: center;
text-decoration: none;
box-shadow: 0 2px 8px 0 #999;
}
button:hover {
background-color: #999;
color: #ffcc00;
}
#nice {
cursor: url("/cursornice.png"), auto;
}
#bad {
cursor: url("/cursorbad.png"), auto;
}
#good {
cursor: url("/cursorgood.png"), auto;
}
</style>
</head>
<body>
<h2>觉得这个怎么样?</h2>
<button id="nice">不错</button>
<button id="bad">不好</button>
<button id="good">很棒</button>
</body>
</html>
使用图标作为光标的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
width: 600px;
margin: 0.5em auto;
}
img {
width: 280px;
height: 186px;
margin: 5px;
display: inline-block;
background-position: 50% 50%;
}
.dog {
cursor: url("/dog.png"), auto;
}
.cactus {
cursor: url("/cactus.png"), auto;
}
.nature {
cursor: url("/nature.png"), auto;
}
.house {
cursor: url("/house.png"), auto;
}
</style>
</head>
<body>
<img class="cactus" src="/cactus.png" alt="cactus">
<img class="nature" src="/nature.png" alt="nature">
<img class="dog" src="/dog.png" alt="dog">
<img class="house" src="/house.png" alt="house">
</body>
</html>
我们还可以使用提供 Base64 代码的中的图标，只需将 Base64 代码粘贴到光标的 URL 值中即可。
或者将图标下载到并使用 URL 设置光标。
日期：2020-06-02 22:14:59 来源：oir作者：oir