CSS3:pointer-events | a标签禁用

用纯css就能实现取消事件响应的方法,pointer-events,使用起来更加简单,它可以:

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit 

1 阻止用户的点击动作产生任何效果

2 阻止缺省鼠标指针的显示

3 阻止CSS里的hover和active状态的变化触发事件

4 阻止JavaScript点击动作触发的事件

比如以下CSS就顺起到将禁用的按钮灰掉的效果

.disabled {
    pointer-events: none;
    cursor: default;
    filter: alpha(opacity=50); /*IE滤镜,透明度50%*/
    -moz-opacity: 0.5; /*Firefox私有,透明度50%*/
    opacity: 0.5; /*其他,透明度50%*/
}

兼容性问题:

原文地址:https://www.cnblogs.com/One-sprite/p/8510859.html

时间: 2024-11-13 10:01:03

CSS3:pointer-events | a标签禁用的相关文章

浏览器 Pointer Events

前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent PointEvent对象继承自MouseEvent,使用上也比较类似. mousedown -> pointerdown mouseenter -> pointerenter mouseleave -> pointerleave mousemove -> pointermove mouse

jQuery和CSS3炫酷浮动标签特效

这是一款炫酷的jQuery和CSS3表单浮动标签特效.浮动标签是指输入框中的文字或占位文本在输入框聚焦的时候,以动画的方式浮动到指定的地方.浮动标签特效是一种新颖时尚的动画特效.不仅效果很酷,而且能以明确的方式提示用户该输入框应该填写上面内容,用户体验非常不错. 这个浮动标签特效中共有4种不同的动画效果.分别是Fieldset样式的浮动标签,使用font-size来动画的浮动标签,使用CSS3 transforms和jquery easing来动画的浮动标签和透明度动画浮动标签. 在线演示:ht

CSS3的几个标签速记3

transition:CSS3过渡     css3里很好的一个标签,可以非常方便的完成需要很多JS才能完成的动态效果 例语法:transition:width 2S,height 2S,transform 2S; CSS3动画 @keyframes:使一种样式逐渐变为另一种样式的过程 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div 6 { 7 width:100px; 8 height:100px;

CSS3之尖角标签

如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性). 运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式. <p> <a>Tag1</a> <a>Tag2</a> <a>Tag3</a> <a>Tag4</a> </p> css主要利用伪元素来实现尖角 a{ dispaly:inline-block; positi

CSS3给页面打标签

我们经常会在页面的左上角或者右上角看到类似如图所示的标签,比如页面的链接(最常使用)等,下面我们就实现一个简单的标签 实现步骤是先做一个水平长条,使用CSS3的transform来实现旋转,如果是在左上角的话就逆时针旋转45度,右上角顺时针旋转45度. 代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type

使用CSS3中的input标签与lable标签组合实现banner图的切换

在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合,首先先来了解下lable标签 <label> 标签为 input 元素定义标签(label). label 元素不会向用户呈现任何特殊的样式.不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身. <label> 标签的 for 属性应该等于

CSS3新增特性\HTML标签类型

RGBA:透明度 作用: 设置透明度(R G B A)   opacity:不透明度     文字也会被设置不透明度   圆角 border-radius:圆角{左上角,右上角...} 块阴影 box-shadow:{水平阴影宽度(负号向下) 垂直阴影宽度(负号向右) 透明度 颜色} text-shadow:{水平阴影宽度(负号向下) 垂直阴影宽度(负号向右) 透明度 颜色} HTML标签类型分为3大类 块级标签 独占一行 能随时设置宽度和高度(div,p,h,ul,li) 行内标签(内联) 多

CSS3几个速记标签2

@font-face:CSS3允许使用自己的字体,用户会自动下载     语法:@font-face{font-family:---:src:url(---)}     如果要使用粗体,必须新添加另一个包含粗体文本的@font-face规则 CSS2D转换 translate()方法:根据左和上给定参数     语法:transform:translate(--px,--px); rotate()方法:旋转,允许负值     语法:transform:rotate(--deg); scale()

纯CSS3实现动画不规则的tab标签切换代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ