css 实现div不可点击样式cursor: not-allowed

最新推荐文章于 2023-04-10 15:44:43 发布
最新推荐文章于 2023-04-10 15:44:43 发布
阅读量8k 收藏 3
点赞数 6
分类专栏： CSS 文章标签： div 不可点击状态 div不可点击 css 实现div不可点击样式 div不可点击样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Taurus_0811/article/details/92806739
版权
1、对于css 实现div不可点击状态，红圈圈形状不可点击样式

在这里插入图片描述

cursor: not-allowed;
2、不可点击状态，但是显示箭头样式

在这里插入图片描述

cursor: not-allowed;
pointer-events: none;
【拾光静好 微微一笑】
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css不常见属性之pointer-events的使用方法
12-03
MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。 pointer-events 属性值有: /* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events:
not-allowed:检查文本是否包含不允许的单词
07-12
不允许 检查文本是否包含不允许的单词 只需调用 app.helpers.notAllowed.check('Example text') ，如果该文本包含被拒绝的单词，它将返回一个真正的布尔值。 app.helpers.notAllowed.check('Eres un gilipollas') //true app.helpers.notAllowed.check('Eres una pütÂ') //true app.helpers.notAllowed.check('Eres mi amiga 946730012') //true (check function checks if there is a spanish telephone number or not allowed word) app.hepers.notAllowed.checkTelephone
css cursor 禁用 图标 cursor: not-allowed;
weixin_30348519的博客
08-02 933
cursor: not-allowed; 转载于:https://www.cnblogs.com/zhengyan/p/5728859.html
css3 鼠标样式、cursor: not-allowed鼠标禁止手势
林中明月间丶
01-19 1572
IE，chrome firefox 都能够正常显示 cursor: not-allowed; 一般配合使用 pointer-events: auto!important; cursor: not-allowed!important; cursor:pointor;是最常用的鼠标样式，即鼠标移动到元素上，比如a标签上会出现一个小手的样式，但是cursor还是其他的样式。现做如下总结： cursor:pointor;图标呈现为指示链接的指针(一只小手)； cursor:help:帮助
鼠标禁用样式(cursor: not-allowed)无效和鼠标禁用事件(pointer-events: none)冲突
小多的博客
07-07 6753
鼠标禁用样式： 鼠标禁用事件： 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向其后代元素。如果同时使用 ，鼠标为默认样式； 解决方法：外层添加盒子将样式分开 外部盒子使用cursor: not-allowed;（cursor：no-drop） 内部盒子使用pointer-events: none; 不使用鼠标禁用事件，而是在鼠标点击事件中做判断...
css实现禁止点击的方法
聆听
09-01 8018
css实现禁止点击的方法
cursor属性 鼠标指针放在元素范围内时的光标形状
Gamin
11-06 686
/*默认 浏览器设置的光标*/ cursor: auto; cursor属性 url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。 e-re..
css 禁止点击
m0_65041204的博客
03-28 585
禁止点击cursor: not-allowed;
如何仿button给div元素设置不可点击样式
qq_42981449的博客
04-10 160
将cursor设置为not-allowed即可。
html div 不可编辑状态,HTML contenteditable属性
weixin_36115475的博客
06-01 2827
前言之前一直没有留意到有contenteditable这个属性，今天突然看到特意记录一下它的 用法 和 实际用途 ；用法为了某个使元素可编辑，你所要做的就是在html标签上设置"contenteditable"属性，它几乎支持所有的HTML元素。contenteditable有以下几种属性："true" 表明该元素可编辑"false" 表明该元素不可编辑"inherit" (默认)表明该元素继承了...
CSS实现当鼠标移到input上时鼠标变为不可输入的状态
12-13
表单不可输入一般用disabled或display=none.但是这样页面并没有变化，所以如果想让鼠标变成红色的警告。就可以用如下属性： 复制代码代码如下: style=”cursor: not-allowed” disabled 示例代码如下： 复制代码...
allowed_failures:travis-ci allowed_failures 测试
06-08
allowed_failures travis-ci allowed_failures 测试
NR5G网络拒绝码-5gmm_cause = 27 (0x1b) (N1 mode not allowed).docx
10-12
从3GPP协议和UE端行为分析5G gmm cause #27的网络问题
去除滚动条 去除滚动条样式 css修改滚动条样式
热门推荐
Taurus_666
06-14 1万+
如何去除滚动条并保留滚动功能 1、首先如果是超出其中一边滚动，另一边不能滚动的话，可以直接写明超出某一边的样式，比如： overflow-y:scroll 2、如果是两边都可以滚动的话，就给父级添加伪元素 ::-webkit-scrollbar，比如： .box{ overflow: scroll } .box::-webkit-scrollbar{ display none }...
css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片
Taurus_666
10-09 4984
先上效果图 首先呈上效果图，主要是针对图片跑马灯效果（请忽略我的快速播放和录屏图标） 具体实现方式 目前我需要展示6张图片，但是为了实现无缝衔接，我的列表放了12张（放2遍图片），这样就不至于在切换时出现那么几毫秒的跳动。 <div id="swiper-roll-wrapper"> <div id="swiper-roll"> <d...
animate调整动画持续时间 修改动画持续时间 修改动画延迟时间
Taurus_666
10-09 4045
如何使用animate.css 修改动画持续时间 真的是炒鸡简单一句话搞定！！ 在你的class名中添加 animation-duration: 1.5s; .your-classname { animation-duration: 1.8s; //动画持续时间完成 animation-delay: 2s; //动画延迟多久才开始 animation-iteration-count...
swiper视频轮播 swiper4无缝轮播视频特效 swiper4无限轮播视频特效
Taurus_666
10-14 2748
swiper视频轮播 首先看效果图（快速播放了），主要功能包括左右按钮， 1、上一个和下一个视频缩小比例并添加蒙层。 2、可以按钮切换，点点切换，手滑动切换。 3、点击视频播放，切换视频，停止播放。 完整代码 完整代码见github ，如果是符合你想要的，欢迎点赞❤ ...
超好用的js 日历插件 日期插件 日期日历选择控件
Taurus_666
01-15 1608
前情提要： 主要是目前项目较小，仅需要一个日历插件，就没有选择引用UI框架，单纯找了一个日历插件，外观相对简单大方，还不错，而且只需要2步就可以完成引入： 第一步（有2种方式引入，支持单独引入文件及npm引入）： 1、官网下载压缩包文件 打开官网： layDate日期插件官网网址 2、第二种方式npm安装： npm install layui-laydate 第二步： 获得 layDate 文...
我需要你就帮我优化下面的代码，优化两个按钮的样式<!DOCTYPE html> <html> <head> <meta lang="zn"> <meta charset="utf-8"> <title>文件实验室账号登录</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: 楷体; font-size: 1.2rem; padding: 1rem; } form { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; margin: auto; } label { margin-bottom: 0.5rem; } input[type='email'], input[type='text'] { padding: 0.5rem; margin-bottom: 1rem; border: none; border-bottom: 2px solid #ddd; width: 100%; box-sizing: border-box; font-size: 1.2rem; } button { padding: 0.5rem; border: none; background-color: #007bff; color: #fff; font-size: 1.2rem; cursor: pointer; } button:hover { background-color: #0069d9; } button:disabled { background-color: #ddd; color: #333; cursor: not-allowed; } </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <form id="login-form" action="#"> <label for="email">邮箱账号：</label> <input type="email" id="email" name="email" placeholder="在此输入邮箱账号"> <button type="button" id="get-code-btn">获取验证码</button> <label for="code">验证码：</label> <input type="text" id="code" name="code" placeholder="在此输入收到的验证码"> <button type="submit">登录</button> </form> <script> $(function() { $('#get-code-btn').click(function() { var email = $('#email').val(); $.ajax({ url: '/admin/', method: 'POST', data: {email: email}, success: function(data) { if (data.status == 'success') { // 获取验证码成功，开始倒计时 var count = 60; var timer = setInterval(function() { if (count == 0) { clearInterval(timer); $('#get-code-btn').prop('disabled', false).text('获取验证码'); } else { $('#get-code-btn').prop('disabled', true).text(count + '秒后重试'); count--; } }, 1000); } else { alert('获取验证码失败，请重试！'); } }, error: function() { alert('获取验证码失败，请重试！'); } }); }); $('#login-form').submit(function() { var email = $('#email').val(); var code = $('#code').val(); $.ajax({ url: '/response/', method: 'POST', data: {email: email, code: code}, success: function(data) { if (data.status == 'success') { // 验证码校验成功，跳转到目标页面 window.location.href = 'http://spacexs.cn'; } else { alert('验证码错误，请重新输入！'); } }, error: function() { alert('验证码错误，请重试！'); } }); return false; }); }); </script> </body> </html>
最新发布
05-24
以下是代码优化： 1. 将CSS样式重构为BEM命名规范，方便代码维护和拓展； 2. 对于按钮样式，使用CSS变量来定义颜色和字体大小，方便后期修改； 3. 为了更好的用户体验，增加了loading状态，避免用户误操作造成不必要的错误。 ``` <!DOCTYPE html> <html> <head> <meta lang="zn"> <meta charset="utf-8"> <title>文件实验室账号登录</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* BEM规范*/ .login-form { font-family: 楷体; font-size: 1.2rem; padding: 1rem; } .login-form__form { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; margin: auto; } .login-form__label { margin-bottom: 0.5rem; } .login-form__input { padding: 0.5rem; margin-bottom: 1rem; border: none; border-bottom: 2px solid #ddd; width: 100%; box-sizing: border-box; font-size: 1.2rem; } .login-form__button { padding: 0.5rem; border: none; background-color: var(--primary-color, #007bff); color: var(--button-text-color, #fff); font-size: var(--button-font-size, 1.2rem); cursor: pointer; } .login-form__button:hover { background-color: var(--primary-color-hover, #0069d9); } .login-form__button:disabled { background-color: var(--button-disabled-bg-color, #ddd); color: var(--button-disabled-text-color, #333); cursor: not-allowed; } .login-form__loading { position: relative; display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; border-top: 3px solid var(--primary-color, #007bff); border-right: 3px solid var(--primary-color, #007bff); border-bottom: 3px solid var(--primary-color, #007bff); border-left: 3px solid transparent; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div class="login-form"> <form class="login-form__form" action="#"> <label class="login-form__label" for="email">邮箱账号：</label> <input class="login-form__input" type="email" id="email" name="email" placeholder="在此输入邮箱账号"> <button class="login-form__button" type="button" id="get-code-btn">获取验证码</button> <label class="login-form__label" for="code">验证码：</label> <input class="login-form__input" type="text" id="code" name="code" placeholder="在此输入收到的验证码"> <button class="login-form__button" type="submit" id="login-btn">登录</button> <div class="login-form__loading" id="loading"></div> </form> </div> <script> $(function() { $('#get-code-btn').click(function() { var email = $('#email').val(); $.ajax({ url: '/admin/', method: 'POST', data: {email: email}, beforeSend: function() { $('#get-code-btn').prop('disabled', true); $('#loading').show(); }, success: function(data) { if (data.status == 'success') { // 获取验证码成功，开始倒计时 var count = 60; var timer = setInterval(function() { if (count == 0) { clearInterval(timer); $('#get-code-btn').prop('disabled', false).text('获取验证码'); } else { $('#get-code-btn').prop('disabled', true).text(count + '秒后重试'); count--; } }, 1000); } else { alert('获取验证码失败，请重试！'); } }, error: function() { alert('获取验证码失败，请重试！'); }, complete: function() { $('#loading').hide(); $('#get-code-btn').prop('disabled', false); } }); }); $('#login-btn').click(function() { var email = $('#email').val(); var code = $('#code').val(); $.ajax({ url: '/response/', method: 'POST', data: {email: email, code: code}, beforeSend: function() { $('#login-btn').prop('disabled', true); $('#loading').show(); }, success: function(data) { if (data.status == 'success') { // 验证码校验成功，跳转到目标页面 window.location.href = 'http://spacexs.cn'; } else { alert('验证码错误，请重新输入！'); } }, error: function() { alert('验证码错误，请重试！'); }, complete: function() { $('#loading').hide(); $('#login-btn').prop('disabled', false); } }); return false; }); }); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

【拾光静好 微微一笑】

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值