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表格中行的不可控操作

相关推荐
ss27312 小时前
AI全栈实战 | 2.4-01 Node 与前端工程化:前端为什么离不开 Node,它不只是构建工具的宿主
前端
aixingpan12 小时前
aixingpan.cn API开发文档:api_docs_transit接口指南
前端·php
鬓戈12 小时前
Volta:解决 nvm「不能同时存在多个 Node 版本」的痛点
前端
吴声子夜歌12 小时前
Nginx应用与运维——Nginx Web服务应用实战(HTTP增强协议服务器的搭建)
运维·前端·nginx
扶风ff21 小时前
新品知识更新太快?用练题簿在线刷题,安排企业培训的小测与复盘
前端·学习·小程序
对空六课1 天前
支持注意力分析的热力图工具有哪些?
前端·数据库·数据分析
Csvn1 天前
Vue3 响应式与编译:依赖收集如何升级为节点级靶向更新
前端
星栈1 天前
pnpm 12 升级实测
前端·javascript
Sirens.1 天前
Java并发锁详解:六类锁策略与 synchronized 底层原理
java·前端·算法
特创数字科技1 天前
一个纯本地运行的图片处理工具:压缩 / 裁剪 / 九宫格 / 圆角 / 滤镜 / 拼图 / 水印,终生使用
前端