一、CSS cursor属性
CSS cursor属性用于定义当鼠标移动到某个元素上时呈现的光标形态，是Web界面设计中非常基础的CSS属性之一。
语法：
selector{
cursor: value;
}
参数：
auto: 默认值，呈现标准光标default: 呈现默认光标none: 隐藏光标context-menu: 呈现上下文菜单光标help: 呈现帮助光标pointer: 呈现链接光标progress: 呈现等待光标wait: 呈现等待光标cell: 呈现表格单元格光标crosshair: 呈现十字线光标text: 呈现文本光标vertical-text: 呈现竖排文本光标alias: 呈现链接操作光标copy: 呈现复制操作光标move: 呈现移动操作光标no-drop: 呈现不可拖动光标not-allowed: 呈现不可用光标e-resize: 呈现向右调整大小光标n-resize: 呈现向上调整大小光标ne-resize: 呈现向右上调整大小光标nw-resize: 呈现向左上调整大小光标s-resize: 呈现向下调整大小光标se-resize: 呈现向右下调整大小光标sw-resize: 呈现向左下调整大小光标w-resize: 呈现向左调整大小光标ew-resize: 呈现水平调整大小光标ns-resize: 呈现垂直调整大小光标nwse-resize: 呈现左上到右下的调整大小光标nesw-resize: 呈现右上到左下的调整大小光标url(address): 呈现自定义光标
二、CSS cursor改不了
在HTML中，一些元素是不允许被改变光标的，比如a、input、button、textarea等表单元素。
此时，如果我们想要在这些元素上自定义光标，可以通过在元素的内部嵌套一个块级元素，将光标属性应用于这个块级元素来实现。
<a href="#">
<div class="cursor">Click me</div>
</a>
<style>
.cursor {
cursor: pointer;
}
</style>
三、CSS cursor属性十字光标
在Web界面设计中，我们通常需要在调整大小或者进行移动操作时呈现十字光标效果。
使用CSS的cursor属性来实现此功能非常简单，你只需要直接在样式中添加 cursor: crosshair; 即可。
四、CSS cursor禁用
在一些容器内，我们希望禁止用户通过鼠标对其进行操作，此时可以采用CSS的pointer-events: none;来实现。
在这种情况下，使用cursor: default;或者cursor: not-allowed;不能改变光标的状态，因为pointer-events: none;会禁止鼠标事件的触发。
.box {
pointer-events: none;
}
五、CSS cursor属性URL
在Web界面设计中，我们可以通过自定义光标的图片路径来实现各种炫酷的效果。
在使用自定义光标之前，你需要准备好光标的图片并上传到服务器。然后，可以通过CSS的cursor: url('address'), auto;来设置自定义光标。
其中，address指代你上传的光标图片的地址。
.cursor {
cursor: url('./cursor.png'), auto;
}
六、CSS cursor pointer
cursor: pointer;是Web界面设计中非常常见的光标效果之一，它表示一个链接。
在实际使用中，我们应该尽量考虑将其应用到可以点击的元素上，以提高用户体验。
七、CSS cursor属性pointer选取
当鼠标位于某个元素上时，可以通过将鼠标指向元素并进行单击操作来选取它。
在Web页面设计中，我们通常希望用户能够轻松地选择文本或者图片区域，此时可以通过CSS的cursor: text;来实现。
.selectable {
cursor: text;
}
八、总结
CSS的cursor属性在Web界面设计中应用十分广泛，在实用的同时也增加了页面的美观度和交互性。
从基础的auto和default，到自定义的url和不可用的pointer-events，CSS的cursor属性能够满足我们对多种光标效果的需求。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/206013.html
微信扫一扫 
支付宝扫一扫 