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

相关推荐
百度地图开放平台7 分钟前
LBS 开发微课堂|智能调度API升级:解决循环取货场景下的调度难题
前端·javascript
cypking24 分钟前
vue实现一个pdf在线预览,pdf选择文本并提取复制文字触发弹窗效果
前端·vue.js·pdf
飘逸飘逸27 分钟前
若依前后端分离版使用Electron打包前端Vue为Exe文件
前端·vue.js·electron·vue·ruoyi
入门级前端开发28 分钟前
npm install 报错ERESOLVE
前端·npm·node.js
anyup1 小时前
最终!我还是抛弃了 VSCode 这个开发工具
前端·aigc·visual studio code
木亦Sam1 小时前
前端安全之 CSRF 攻击的防御策略
前端
光影少年2 小时前
es6+新增特性有哪些
前端·javascript·es6
木亦Sam2 小时前
前端代码优化之函数节流与防抖技巧
前端
diang2 小时前
DeepSeek在前端的使用场景及使用
前端·deepseek
Georgewu2 小时前
【HarmonyOS Next】鸿蒙应用弹框和提示气泡详解(一)
前端·华为·harmonyos