可通过使用css伪类实现点击元素变色的效果,两个伪类是:active, :focus

:active

:active选择器用于选择活动链接。当在一个链接上点击时,它就会成为活动的(激活的),:active选择器适用于所有元素,不仅限于链接a元素

:focus

:focus 选择器用于选取获得焦点的元素。仅接收键盘事件或其他用户输入的元素允许 :focus 选择器。

由于上面的特性,如果想实现点击时变色效果,有以下两种方法,两者区别在

:active,元素被点击时变色,但颜色在点击后消失

:focus, 元素被点击后变色,且颜色在点击后不消失

    button:active{
   background:olive;
}
button:focus{
   background:olive;
}

在线实例:http://jsfiddle.net/vt1bzpsq/

由于div等元素无法接受键盘或其他用户事件,即不支持:focus伪类,可通过增加tabIndex属性使其支持:focus

<div tabindex="1">
Section 1
</div> <div tabindex="2">
Section 2
</div> <div tabindex="3">
Section 3
</div>
div:focus {
background-color:red;
}

在线实例:http://jsfiddle.net/mwbbcyja/

CSS实现点击改变元素背景色的更多相关文章

  1. 仅使用css实现点击 控制元素的显示与隐藏!

    视频教程:https://www.bilibili.com/video/BV1uE411Q7tx?p=15&spm_id_from=pageDriver 大致方法:在被点击的元素后面 放一个c ...

  2. jq点击改变元素样式、添加类,显示隐藏,图标旋转,再次点击还原;表格点击显示下拉详情

    点击前 点击后 <tr> <td class="right" data-id="{$vo.id}" id="{$vo.id}&quo ...

  3. css 用direction来改变元素水平方向,价值研究。

    "direction"有两个值:ltr | rtl ltr:从左往右 rtl:从右往左 默认:ltr 一起看个效果就懂了. <style> div{ direction ...

  4. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

  5. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  6. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  7. js如何实现动态点击改变单元格颜色?

    js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...

  8. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  9. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

随机推荐

  1. python 实现redis订阅发布功能

    redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  2. Spring学习(十五)----- Spring AOP通知实例 – Advice

    Spring AOP(面向方面编程)框架,用于在模块化方面的横切关注点.简单得说,它只是一个拦截器拦截一些过程,例如,当一个方法执行,Spring AOP 可以劫持一个执行的方法,在方法执行之前或之后 ...

  3. java学习(一) 环境搭建、hello world的demo

    本程序媛搞前端的,上班偶有空闲,不妨来学习学习,不然怎么包养小白脸,走上人生巅峰? 说实话,每个语言都相通,有了javascript的基础,并且有了两三年跟java打交道的经验,简单学习下java想必 ...

  4. ubuntu lvm模式进行扩容

    ubuntu的16.04 18.04有lvm的功能(安装的时候的选项),能在磁盘空间用完的时候,无缝增加一个磁盘进去.因为linux系统只有一个盘,所以是非常方便,不会有windows加1个磁盘要进行 ...

  5. Kickstart Round G 2018

    第一次打codejam....惨的一比,才A1.5题,感觉自己最近状态渣到姥姥家了,赶紧练练 A 模拟,注意0的问题 #include <iostream> #include <cs ...

  6. Java 集合基础知识 List/Set/Map

    一.List Set 区别 List 有序,可重复: Set 无序,不重复: 二.List Set 实现类间区别及原理 Arraylist 底层实现使用Object[],数组查询效率高 扩容机制    ...

  7. 阿里云ubuntu16.04安装beef

    0x0 前言 环境:阿里云轻量服务器ubuntu16.04 需要安装2.4以上版本的ruby:https://www.cnblogs.com/Rain99-/p/10666247.html 参考资料 ...

  8. springboot通过http访问——修改访问的端口号

    文章转载来于:https://blog.csdn.net/zknxx/article/details/53433592 有时候我们可能需要启动不止一个SpringBoot,而SpringBoot默认的 ...

  9. C#获取周一、周日的日期 函数类

    #region 得到一周的周一和周日的日期        /// <summary>         /// 计算本周的周一日期         /// </summary> ...

  10. 剑指offer :从尾到头打印链表

    题目描述: 输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 解题思路: 链表的遍历只能从头向尾进行,要从尾到头输出,考虑用栈.先从头到尾遍历一次链表,同时将值进栈,再清空栈,同时将值 ...