【CSS】鼠标移入显示禁用图标

从本文开始，将会用三篇文章来一步一步实现 vue+antd+ts实战后台管理系统中table表格的不可控操作。注：使用禁止触发事件时，鼠标样式会失效，变成箭头，即cursor:not-allowed;实现表格的不可控有两种实现方案，一种是 通过css的禁用操作来实现，另一种是 通过ant design vue自带的api属性来实现。vue antd项目实战——修改ant design vue table组件的默认样式（css样式穿透）css实现鼠标禁用（鼠标滑过显示红色禁止符号）

css样式，鼠标移动上去变成禁用、小手等样式。

注:使用禁止触发事件时,鼠标样式会失效,变成箭头,即cursor:not-allowed,与pointer-events:none;禁用样式:(鼠标滑过显示红色禁止符号)

我们只需要在这个元素上添加【cursor：no-drop】就可以实现。这个需求是平常开发中常用的一个样式。

实现了一个下拉菜单的动画效果，包括一个主按钮和一个下拉菜单列表。点击主按钮会展开下拉菜单列表，同时箭头会旋转，列表项会逐渐显示出来。鼠标悬停在列表上时，会出现一个浮动图标。整个下拉菜单的样式比较简洁，使用了黑色和灰色的背景色，以及白色和淡灰色的文字和图标颜色。动画效果使用了 CSS 的过渡和变换属性。

Html5 + Css3笔记详细汇总大全

HTML/CSS笔记#自用#尚硅谷#李立超

鼠标经过是显示红色圆圈加斜杠的禁止图标 cursor: no-drop; cursor: not-allowed; 代码： .box:hover{ cursor: no-drop; /* cursor: not-allowed; */ } 两种方法一个效果，随便一个都可以用

有时候需要用到 鼠标滑上去直接显示禁用 仅需要设置一下样式即可 .text:hover{ cursor:not-allowed; /* 光标是一个红色的圈加一个斜杠）*/ } 如此设置即可 click点击失效 pointer-events:none; 注意二者不能同时使用 ...

原文地址：http://blog.csdn.net/zl544434558/article/details/21399059 表单不可输入一般用disabled或display=none.但是这样页面并没有变化，所以如果想让鼠标变成红色的警告。就可以用如下属性： [html] view plain copy  print?

通过CSS的属性，我们可以轻松地控制元素的鼠标交互。将属性设置为none可以禁用鼠标的功能，而设置为auto则可以恢复鼠标的正常交互。这为我们在网页设计和开发中提供了更多的灵活性和可能性。希望本文对你理解CSS禁用鼠标的方法有所帮助。通过实践和进一步探索，你可以进一步扩展这些概念，并将其应用于你的网页项目中。

鼠标禁用光标,禁用鼠标样式 是一个红圈加斜杠的鼠标光标 cursor: not-allowed;

以下两种方式都可以实现 cursor:not-allowed; cursor:no-drop;

如何修改input disabled时默认样式

<div style="cursor: not-allowed;cursor: no-drop;"> <div @click="getData()" style="pointer-events: none;"> </div> </div> 鼠标悬停禁用图标css cursor: not-allowed; cursor: no-drop; 点击事件不生效css pointer-events: none; 注释：如果把两个样式放到同一级，会期冲突，