使用css中的cursor的属性设置按钮的禁用状态

最新推荐文章于 2025-06-08 09:01:17 发布
最新推荐文章于 2025-06-08 09:01:17 发布
阅读量1w 收藏 1
点赞数 2
CC 4.0 BY-SA版权
文章标签： css 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Devio_001/article/details/90291984
博客展示了使用HTML和CSS实现按钮样式的代码。HTML部分创建了普通按钮和禁用按钮，CSS部分对按钮的样式进行了设置，包括圆角、背景色、字体大小等，还对禁用按钮设置了鼠标样式和透明度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

html如下:

<button class="button">按钮</button>
<button class="button disabled">禁用按钮</button>

css如下:

.button {

border-radius: 4px;

background-color:blueviolet;

font-size: 18px;

text-align: center;

padding: 10px 40px;

border: none;

color: #ffff;

}

.disabled {

cursor:not-allowed;

opacity: 0.6;

}

效果图如下：

Devio_001
关注
按钮（秒懂CSS按钮的使用）
百赢出品，必属精品
04-20 3215
按钮是网页中的一个可点击元素，通常用于执行特定的动作或操作。它可以是文本、图标或两者的组合，并且可以添加样式以符合网页的设计需求。按钮是网页和应用程序界面中常见的交互元素，用于触发特定的操作或执行特定的功能。交互性: 按钮是用户与界面进行交互的主要手段之一，用户通过点击按钮来执行特定的操作。可视化: 按钮通常具有明显的外观，以吸引用户的注意力，并且可以通过颜色、形状等视觉元素来传达信息。反馈: 当用户与按钮进行交互时，通常会提供反馈以指示操作的状态，例如按钮的状态变化、动画效果或者提示信息。功能性。
CSS实现禁用状态，样式设置以及不可点击事件的行为
热门推荐
**My Coding Family**
03-26 4万+
今天怂怂就为大家分享一篇通过css禁用状态，样式设置以及不可点击样式事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随怂怂过来看看吧 一：为input框添加禁用状态 1、readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选择,可以接收焦点，后台能接收到传值. 代码演示： <input type="text" name="fir...
cursor css(鼠标悬浮禁用) 网页制作CSS中的光标类型
weixin_42171955的博客
09-16 2290
Cursor是网页制作CSS中的光标类型，与图标文件Icon一样，是特殊类型的小位图。 语法： cursor :auto|all-scroll|col-resize|crosshair|default|hand|move|help|no-drop|not-allowed|pointer|progress|row-resize|text|vertical-text|wait|*-resize|url...
java cursor属性_【CSS】按钮的禁用与可用 CSS Cursor 属性
weixin_42456372的博客
03-06 241
PHP filesystem attack vectorshttp://www.ush.it/2009/02/08/php-filesystem-attack-vectors/ On Apr 07, 2008 I spoke with Kuza55 and ...&lbrack;转&rsqb; JavaScript中的字符串操作一.概述 字符串在JavaScript中几乎无...
You-need-to-know-css项目解析：CSS鼠标光标样式全指南
最新发布
gitblog_00785的博客
06-08 296
You-need-to-know-css项目解析：CSS鼠标光标样式全指南 前言 在Web开发中，鼠标光标的样式变化是提升用户体验的重要细节。通过CSS的cursor属性，我们可以为不同交互场景设置合适的光标样式，向用户传达清晰的交互意图。本文将全面解析CSS cursor属性的各种取值及其应用场景。 基础cursor属性 cursor属性用于定义鼠标指针在元素上的显示样式。基本语法如下： sel...
css实现鼠标禁用（鼠标滑过显示红色禁止符号）
XSL_HR的博客
12-21 1万+
从本文开始，将会用三篇文章来一步一步实现vue+antd+ts实战后台管理系统中table表格的不可控操作。中间会补充两篇css知识文章，方便后续功能的实现。 实现表格的不可控有两种实现方案，一种是 通过css的禁用操作来实现，另一种是 通过ant design vue自带的api属性来实现。本期文章将开门见山，给出css的实现方法以及最终效果。
【CSS】按钮的禁用与可用 CSS Cursor 属性
ass201295的专栏
03-01 1147
禁用时的样式 可用时的样式 样式很简单，禁用就设置为灰色，可用就设置为红色，今天这个不是重点，重点的是，光标的样子 一般，禁用时候，光标移动到按钮的上方，光标如下 而在启用按钮的时候，光标移动到按钮上方，光标为金手指 如何控制他们光标的样式，这里，CSS提供了一个控制属性样式 cursor 正常选泽： cursor:default 金手指：...
css的cursor禁止功能
rock_23的博客
04-16 1334
所以我在设置了cursor样式后，让点击失效的问题。因为第二个生效，第一个就不生效了，
CSS设置输入框初始状态和禁用状态下“发送”按钮的样式代码怎么写
04-19
以下是关于CSS设置输入框初始状态和禁用状态下“发送”按钮的样式代码： 假设我们有一个input和button标签，分别用于输入和发送消息。我们可以使用CSS来设置输入框和按钮的样式，包括其初始状态和禁用状态。 首先...
鼠标特效css的cursor属性
03-28
其中，利用CSS中的`cursor`属性来改变鼠标指针样式就是一种常见的优化手段。通过设置不同的鼠标样式，可以给用户传递更多的交互信息，使得网站显得更加生动有趣。 #### CSS Cursor属性概述 `cursor`属性用于定义当...
【Tailwind CSS】`cursor-not-allowed` 及其相关属性详解
lph159的博客
11-18 1407
Tailwind CSS 的类是一个非常实用的工具，能为禁用状态的按钮、输入框等元素提供清晰的视觉反馈。在项目中合理应用，可以显著提升用户体验，让用户更直观地理解当前的交互状态。希望本文能够帮助你在实际项目中更好地理解和应用，为你的设计增添更多互动性和友好性。
鼠标禁用样式(cursor: not-allowed)&鼠标禁用事件(pointer-events: none)
m0_46639734的博客
04-27 2294
当一个按钮禁用的时候，我们需要展示禁用样式，使用cursor: not-allowed，同时我们需要在禁用状态下点击按钮，是不应该触发事件的，但是我们知道只使用cursor: not-allowed，实际上我们点击按钮时还是触发了事件。接下来我们就来讨论如何实现禁用样式且无法触发事件的实现以上就是今天要讲的内容，本文介绍了两种禁用事件方法的使用。
CSS鼠标执指针光标修改 加载 点击 禁止点击
qq_20536321的博客
05-09 351
使用cursor可以修改指针的类型。
CSS---cursor鼠标属性
JYX8
03-29 5974
CSS改变鼠标指针形状的方法：在项目中会遇到需要点击的图片，字体，按钮等，就需要鼠标的指针形式变成小手型； 当文本款，文本域是禁止输入的时候，鼠标的指针变成红圈中间一道杠的形式；
css cursor中鼠标悬停禁用样式
my466879168的博客
07-05 1万+
鼠标悬停时禁用的样式 cursor:not-allowed;//是禁用的样式 一个圆圈中间一个斜杠 //其中还有一个属性也是这个样式 cursor:no-drop; cursor在项目中最常用的属性是pointer小手样式属性
pointer-event 和 cursor 属性 在div上实现button的disabled禁用效果
weixin_45695200的博客
11-10 2137
当按钮是用div写的时候，不能够像button一样直接使用disabled属性，此时可以通过 事件禁用样式 pointer-events: none; 和 鼠标悬浮禁用手势样式 cursor: not-allowed; 来实现类似button按钮disabled属性效果； 但是如果把这两个样式写在一个class里面，事件禁用样式会影响鼠标悬浮禁用手势样式，使得禁用状态无法显示。 解决：将 cursor: not-allowed 写在外层div上 <div class="A"> <d
disable小坑
weixin_47629406的博客
06-22 244
css
鼠标禁用样式（cursor:not-allowed）和鼠标禁用事件（pointer-events: none）
小太阳的博客
10-24 4742
注意：父元素如果设置了pointer-event:none 并不意味着父元素上的事件侦听器永远不会被触发，当子元素上设置pointer-event值不是none,那么都可以通过事件传播机制来触发父元素上的事件。用法：该方法只能实现样式上的不可点击，点击依然会触发相应的点击时间，这个样式主要是配合js逻辑（return）阻止事件的发生。注意：如果同时使用这两种样式，会阻止事件的触发，但鼠标并不会显示禁用的样式，而是箭头样式。用法：该样式会阻止默认事件，但是鼠标样式会变成箭头的样子。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值