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

相关推荐
码上暴富6 分钟前
Cursor / VS Code 自定义文件颜色
前端·vscode
开开心心就好10 分钟前
电子教鞭工具支持画框写字插图片功能齐全
android·开发语言·前端·javascript·人工智能·pdf·html
CarIise1 小时前
下拉菜单HTML/CSS/JS实现
前端·css
2601_962071571 小时前
Java进阶(vue基础)
前端·javascript·vue.js
研☆香1 小时前
数组方法 splice讲解 拓展
开发语言·前端·javascript
码视野1 小时前
基于 Spring Boot + Vue3 的【城市地下燃气管网微泄漏感知与相邻地下空间燃爆预警中台】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端
淡海水1 小时前
05-03-栈队列-PriorityQueue-TElement-TPriority-NET6优先队列语义与四叉堆实现
服务器·前端·c#·priorityqueue·clr·telement
ITresearchGuest2 小时前
LangChain JS 入门:快速搭建前端 AI 开发环境
前端·javascript·langchain
YHHLAI2 小时前
React + TypeScript 实战:从零构建颜色选择器应用
前端·react.js·typescript
Profile排查笔记2 小时前
指纹浏览器手机版怎么选?从本地 App 到云端 Android 的实现方式解析
前端·人工智能·后端·自动化