一:实现方法: 1、直接给元素添加“pointer-events: none;”样式来禁止触发事件,实现不可点击。 2、先给元素添加“cursor: not-allowed;”样式;然后使用js代码阻止点击事件的触发,实现不可点击。 二:鼠标不可点击时的样式 1、cursor: not-allowed; 2、需要注意的是,虽然样式显示不可点击,但是点击后仍会触发相应...
pointer-events:none; 使用该样式,会阻止事件的触发。鼠标会显示为箭头样式; 如果同时使用这两种样式,会阻止事件的触发,但鼠标并不会如我们所想显示为禁用样式,而是显示为箭头样式。 所以我们在实现效果的时候,可以使用cursor:not-allowed;然后使用 js代码去阻止事件的触发; cursor:not-allowed; pointer-events:none;...
.disable-click{cursor:not-allowed;pointer-events:none;opacity:0.5;} 以下内容为GPT生成: pointer-events 属性控制当前元素是否可接受鼠标事件。 将其设置为 none 将导致元素无法响应任何鼠标事件,比如点击、悬停等。 这是因为浏览器在决定一个鼠标事件是否可以达到目标元素时,会检查目标元素的整个祖先链上的 pointer...
pointer-events: none; /* cursor: default; */ cursor:not-allowed; opacity: 0.6; } div.ex2 { pointer-events: auto; } pointer-events 属性 请把鼠标指针移至下面的链接,查看是否对指针事件做出反应: cursor:not-allowed;//MDN解释:不能执行 cursor:no-drop;// MDN解释:当前位置不能扔下 Window...
17、not-allowed此光标指示禁止(通常是一个红色的圈加一个斜杠)。 18、no-drop此光标指示禁止(通常是一个红色的圈加一个斜杠,同17条)。 2.阻止click点击事件 css禁用鼠标点击事件 注:使用禁止触发事件时,鼠标样式会失效,变成箭头,即cursor:not-allowed; pointer-events:none;不可同时使用...
禁用样式:17、not-allowed此光标指示禁止(通常是一个红色的圈加一个斜杠)。 18、no-drop此光标指示禁止(通常是一个红色的圈加一个斜杠,同17条)。 #2.阻止click点击事件 ###css禁用鼠标点击事件 代码语言:javascript 复制 pointer-events:none; 注:使用禁止触发事件时,鼠标样式会失效,变成箭头,即cursor:not-allow...
input[readonly] //readonly:后台能接收此input框传值{background:#dddddd; //为带有readonly的input框添加背景颜色cursor: not-allowed // 表示一个红色的圈加一个斜杠} 2.鼠标原有的事件不能实现:pointer-events:none 样式演示: input[disabled] /
/* Adding cursor just works: */ a[aria-disabled="true"] { cursor: not-allowed; } /* Makes link non-clickable: */ a[aria-disabled="true"]:active { pointer-events: none; } CodePen Example EDIT: Chrome has started to add focus on click on elements with tabindex attribute (even wit...
cursor: not-allowedというCSSを使う。 そして最初に書いたコードがこちら。 .done { pointer-events: none; cursor: not-allowed; } 実行 しかし、これだとクリックはできないけどポインターは通常通り、、、 つまり、cursor: not-allowed;が効いてない。 CSSを指定する順番かな?って入...
18、no-drop此光标指示禁止(通常是一个红色的圈加一个斜杠,同17条)。...#2.阻止click点击事件 ###css禁用鼠标点击事件 pointer-events:none; 注:使用禁止触发事件时,鼠标样式会失效,变成箭头,即cursor:not-allowed; pointer-events 3.7K20 在Ubuntu 20.04中禁用motd欢迎消息 本...