css实现鼠标禁用(鼠标滑过显示红色禁止符号)

css实现鼠标禁用(鼠标滑过显示红色禁止符号)

创作背景

从本文开始,将会用三篇文章来一步一步实现 vue+antd+ts实战后台管理系统中table表格的不可控操作。中间会补充两篇css知识文章 ,方便后续功能的实现。

实现表格的不可控有两种实现方案,一种是 通过css的禁用操作来实现,另一种是 通过ant design vue自带的api属性来实现。

css鼠标禁用

禁用样式:(鼠标滑过显示红色禁止符号)

复制代码
cursor:no-drop       // 一个红色的圈加一个斜杠,表示禁止的意思
 
cursor:not-allowed   // 一个红色的圈加一个斜杠,表示禁止的意思

禁用鼠标点击事件

复制代码
pointer-events:none;

注:使用禁止触发事件时,鼠标样式会失效,变成箭头,即cursor:not-allowed; 与pointer-events:none;不可同时使用

文章发展线

本专题文章发展线

css实现鼠标禁用(鼠标滑过显示红色禁止符号)

css样式穿透(/deep/深度选择器)

vue antd项目实战------修改ant design vue table组件的默认样式(css样式穿透)

通过ant design vue的API属性实现不可控操作

vue antd项目实战------根据数据属性实现table表格中行的不可控操作

相关推荐
卸任21 分钟前
Vibe coding工具使用心得
前端·ai编程
brien91 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance1 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M1 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写1 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李2 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易2 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马2 小时前
前沿视界
前端
kyriewen2 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易2 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员