精华内容
下载资源
问答
  • CSS 点击事件

    2017-02-18 23:37:00
    :active 伪类向激活(在鼠标点击与释放之间发生的事件)的元素添加特殊的样式。 这个伪类应用于处于激活状态的元素。最常见的例子就是在 HTML 文档中点击一个超链接:在鼠标按钮按下期间,这个链接是激活的。还有...

    :active 伪类向激活(在鼠标点击与释放之间发生的事件)的元素添加特殊的样式。

    这个伪类应用于处于激活状态的元素。最常见的例子就是在 HTML 文档中点击一个超链接:在鼠标按钮按下期间,这个链接是激活的。还有其他一些方式来激活元素,另外从理论上讲其他元素也可以被激活,不过 CSS 对此没有定义。

    说明

    激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接,它们会在支持 CSS 的浏览器中以不同的方式显示出来:

    a:link {color: #FF0000}     /* 未访问的链接 */
    a:visited {color: #00FF00}  /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
    a:active {color: #0000FF}   /* 被选择的链接 */
    

    注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后!!

    注释:为了产生预期的效果,在 CSS 定义中,a:active 必须位于 a:hover 之后!!

    注释:Pseudo-class(伪类)的名称对大小写不敏感。

    注释:伪类可与 CSS 类配合使用:

    转载于:https://www.cnblogs.com/tongbiao/p/6414526.html

    展开全文
  • css点击事件

    千次阅读 2018-01-03 14:45:11
    DOCTYPE html> 2 html lang="en"> 3 head> 4 meta charset="UTF-8"> 5 title>点击title> 6 style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12
    <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>点击</title>
     6     <style>
     7         * {
     8             margin: 0;
     9             padding: 0;
    10         }
    11 
    12         .box {
    13             position: relative;
    14             display: block;
    15             float: left;
    16             width: 50px;
    17             height: 50px;
    18             margin-top: 100px;
    19             margin-left: 100px;
    20             border: 1px solid #18c250;
    21             border-radius: 3px;
    22         }
    23 
    24         input[type=checkbox]:checked + label .box:before {
    25             content: "";
    26             position: absolute;
    27             top: 28px;
    28             left: 2px;
    29             width: 23px;
    30             height: 3px;
    31             background-color: #18c250;
    32             transform: rotate(45deg);
    33             -webkit-transform: rotate(45deg);
    34         }
    35 
    36         input[type=checkbox]:checked + label .box:after {
    37             content: "";
    38             position: absolute;
    39             top: 24px;
    40             left: 15px;
    41             width: 37px;
    42             height: 3px;
    43             background-color: #18c250;
    44             transform: rotate(-45deg);
    45             -webkit-transform: rotate(-45deg);
    46         }
    47 
    48         .info {
    49             float: left;
    50             margin-top: 92px;
    51             margin-left: 10px;
    52             font-size: 48px;
    53             user-select: none;
    54         }
    55 
    56         label {
    57             display: inline-block;
    58             max-width: 100%;
    59         }
    60 
    61         input[type=checkbox]{
    62             display: none;
    63         }
    64 
    65     </style>
    66 </head>
    67 <body>
    68 <input id="input" type="checkbox">
    69 <label for="input">
    70     <span class="box"></span>
    71     <span class="info">已阅读协议书</span>
    72 </label>
    73 </body>
    74 </html>
    复制代码

    效果:

     注意点:input要写在label前面,因为 + 选择器指的是兄弟元素中的弟弟元素,不包括哥哥元素。

    写这个的初衷就在于那个亘古不变的道理,能用CSS解决的就不用js

    在来个炫酷点的开关

    复制代码
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         *{
     8             margin: 0;
     9             padding: 0;
    10         }
    11         body{
    12             background-color: #abcdef;
    13         }
    14         input{
    15             display: none;
    16         }
    17         .switch{
    18             position: relative;
    19             display: block;
    20             width: 38px;
    21             height: 20px;
    22             cursor: pointer;
    23             user-select: none;
    24             margin-top: 100px;
    25             margin-left: 100px;
    26             border-radius: 10px;
    27             background-color: #b0b0b0;
    28         }
    29         .switch:before{
    30             content: 'OFF';
    31             position: absolute;
    32             top: 1px;
    33             right: 2px;
    34             font-size: 12px;
    35             color: #fff;
    36             transform: scale(.75);
    37             -webkit-transform: scale(.75);
    38         }
    39         .switch:after{
    40             content: "";
    41             position: absolute;
    42             top: -1px;
    43             left: -6px;
    44             width: 22px;
    45             height: 22px;
    46             border-radius: 50%;
    47             background-color: #fff;
    48             -webkit-transition: left 200ms linear;
    49         }
    50         input[type=checkbox]:checked + label .switch{
    51             background-color: #18c250;
    52         }
    53         input[type=checkbox]:checked + label .switch:before{
    54             content: "ON";
    55             right: 15px;
    56         }
    57         input[type=checkbox]:checked + label .switch:after{
    58             left: 25px;
    59         }
    60     </style>
    61 </head>
    62 <body>
    63 <input id="input1" type="checkbox">
    64 <label for="input1">
    65     <a class="switch">
    66 
    67     </a>
    68 </label>
    69 <input id="input2" type="checkbox">
    70 <label for="input2">
    71     <a class="switch">
    72 
    73     </a>
    74 </label>
    75 </body>
    76 </html>
    复制代码

    效果:

    展开全文
  • 2.CSS文本 2.1 white-space: pre-line; 强制文字进行换行,前提是在文本中要先在文字中加” \n “,这样css识别出来在此处进行强制换行。word-wrap:normal | break...点击事件on和onclick 两者之间的区别(很重要。。。

    2.CSS文本

    • 2.1

    white-space: pre-line; 强制文字进行换行,前提是在文本中要先在文字中加” \n “,这样css识别出来在此处进行强制换行。

    word-wrap:normal | break-word, break-word可以将内容在边界内换行(不截断英文单词的换行)

    word-break:keep-all | break-all当设置keep-all的时候,对于中文文本来说,只可以在半解空格或连字符或任何标点符号的地方换行,中文与中文之间不可以换行,一个长文本也不可以换行。

    当设置break-all的时候,主要是在不同的浏览器上显示的效果都不同,因为每个浏览器的内核不同,这里在chrome、safari、Firefox中可以允许标点符号位于首行显示。

    • 2.2
      溢出文本text-overflow
      text-overflow: clip | ellipsis有两个属性,一个是默认的属性 clip , 另一个是ellipsis

    如果要实现溢出隐藏,必须满足3个条件:
    - width :明确给需要截取文本的容器设置宽度值。
    - white-space:nowrap:给文本容器设置强制不换行,让元素文本一行内显示。
    - over-flow: hidden:设置容器文本溢出时隐藏。
    执行上面的属性条件之后,页面超出的文字部分将会以...的形式显示。



    3.点击事件on和onclick 两者之间的区别(很重要)

    • 第1种事件
      $('.XX').click('.xxx',function() { alert('xxx') });

    • 第2种事件
      $('.XXX').on('click','.xxx', function() { alert('xxx') })

    click是点击事件,但是在页面加载完之后,jquery事件新添加的元素,用click的话是无法获取元素的,这个时候要用on去获取元素事件,简单的说页面加载完成时候页面显示的元素可以用on,也可以用click,但是页面加载完成之后后期再追加的元素只能用on

    这两个事件的区别之处在于:
    简单的说页面加载完成时候页面显示的元素(DOM节点已全部加载完)可以用 on , 也可以用click

    但是在页面加载完成之后后期再追加元素(DOM节点元素还没完全显示出来)只能用on

    解释一下:

    $('.AAA').on('click','.bbb', function() { alert('bbb') })
    获取class 为bbb元素的上一级(或父级)元素,选择click的方式,执行回调函数function ()并运行弹出元素bbb,这里的on,元素bbb如果没全部加载出来。没有直接获取到class为bbb的元素,这个时候它就会去找上一级(或父级)的元素,然后在从上一级(或父级)往下接着再执行,就会找到class为bbb的元素了,就触发了点击事件,并执行事件里面的函数啦 ~

    展开全文
  • css禁止点击事件

    2020-11-26 21:44:08
    将禁用的按钮灰掉的效果 .disabled { pointer-events: none; cursor: default; opacity: 0.6; } 选中的按钮 .disabled.is-active { pointer-events: auto; cursor: pointer;...css禁止点击事件

    将禁用的按钮灰掉的效果

    .disabled {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
    }
    

    选中的按钮

    .disabled.is-active {
        pointer-events: auto;
        cursor: pointer;
        opacity: 1;
    }
    

    css禁止点击事件

    展开全文
  • css 禁止点击事件触发

    2020-07-31 16:12:51
    css 禁止点击事件触发 鼠标不可点击主要是两种表现: 1.鼠标不可点击时的显示状态 cursor: not-allowed 2.禁止触发点击事件 pointer-events:none
  • 今天来做一个小案例。...style type="text/css"> body, div,a { margin: 0; padding: 0; text-decoration: none; } #box>a { display: none; } #box>a:first-of-type { display: block...
  • // 执行一些动作... $("#myModal2").css("pointer-events","none"); // 执行一些动作... $("#myModal").css("pointer-events","auto"); style="pointer-events: none;"...
  • css实现点击事件

    万次阅读 2018-10-14 22:19:43
    一、选择胶囊 &lt;style&gt; *{padding:0;margin:0} body{background: #abcdef} input{display: none} .switch{ position:relative; display: block; width:38px...
  • CSS实现点击事件样式

    千次阅读 2016-08-14 10:40:40
    CSS实现点击事件样式 利用checkbox绑定label实现。点击label时等同于点击checkbox。 接下来就是将checkbox隐藏掉,visibility: hidden,不能用display:none。 接着是定义定义checkbox checked时的事件。在点击时...
  • css3禁止点击事件

    千次阅读 2019-02-14 16:53:29
    //css禁止点击事件 .disabled {  pointer-events: none;  cursor: default;  opacity: 0.6;} 其中,pointer-events: none;是css3新出现的属性,意思就是禁止鼠标点击事件,当元素中有这一属性时,链接、点击...
  • css--禁用点击事件

    2019-09-05 16:16:30
    css--禁用点击事件
  • css禁用鼠标点击事件

    2016-08-02 10:10:00
    1.css禁用鼠标点击事件 .disabled { pointer-events: none; } 转载于:https://www.cnblogs.com/jiangtuzi/p/5728230.html
  • 今天来做一个小案例。...style type="text/css"> body, div,a { margin: 0; padding: 0; text-decoration: none; } #box>a { display: none; } #box>a:first-of-type { display: block...
  • css禁用div的点击事件

    2020-07-20 15:08:58
    css禁用div的点击事件 $("#creditPay").css("pointer-events","none");
  • js/jquery/css 禁用点击事件

    万次阅读 2016-12-09 22:13:55
    js/jquery/css 禁用点击事件> 工作中遇到这种情况: 验证邮箱 页面的重新发送需要在3分钟后才可以点击重新发送,所以在这之前需要禁用他的点击==我网上查了后有一下几种实现方法==1.css禁用鼠标点击事件.disabled { ...
  • css实现点击事件

    2017-03-21 18:52:00
    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>点击</title> 6 <style> 7 * { 8 ...
  • 最近看到一道题目:点击小图标,切换指定区域的背景切换,要求不允许用JS。 一看到这道题,我就想到了:hover伪类选择器,也确实实现了背景切换,不过仔细看题,是要“点击”图标,而不是悬停,我苦苦思索,也没想到...
  • 案例2:通过点击事件结合模拟父元素选择器使用可以看这篇文章:CSS中模拟父元素选择器 案例3:利用target制作的tab切换可以看这篇文章:CSS3选择器的研究,案例 ctrl+f 搜索target 另外一种tab的实现,通过结合z-...
  • css中的“点击事件

    2021-01-30 22:05:21
    项目开发中要给dom添加点击事件可能都会想到用js来实现,但是某些场景下使用css来实现会更加优雅,下面进入正题 实现思路 对于原生的dom,能够响应鼠标点击的惟input 框的checkbox 和 radio,可以利用他们来实现...
  • [css] 怎样用纯CSS实现禁止鼠标点击事件? pointer-events: none; 是css3新出现的属性,意思就是禁止鼠标点击事件,当元素中有这一属性时,链接、点击事件统统失效。 个人简介 我是歌谣,欢迎和大家一起交流前后端...
  • css3模拟jq点击事件

    2017-01-22 18:56:55
    今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮,然后后面跟一个a标签,让radio覆盖在a上,那为...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,849
精华内容 1,139
关键字:

css点击事件