可通过使用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. TCP/IP 协议簇 端口 三次握手 四次挥手 11种状态集

    第1章 概念介绍 1.1 VLAN 1.1.1 什么是VLAN VLAN(Virtual LAN),翻译成中文是“虚拟局域网”.LAN可以是由少数几台家用计算机构成的网络,也可以是数以百计的计算机构成 ...

  2. SSD固态硬盘的GC与Trim

    操作系统:其实并没有删除数据: 事实上,它只是在硬盘前的索引区里标记这块文件占用的区域为无效的, 所以等该区域被擦除后,下次数据将要再次写入的时候,可以写入这块被标记的区域. 这也就是为啥那 些所谓的 ...

  3. javaweb学习4——HttpServletRequest的使用

    声明:本文只是自学过程中,记录自己不会的知识点的摘要,如果想详细学习JavaWeb,请到孤傲苍狼博客学习,JavaWeb学习点此跳转 本文链接:https://www.cnblogs.com/xdp- ...

  4. hdu1272小希的迷宫(并查集判断回路和是否连通)

    传送门 迷宫中不能有回路,还要连通 如果最后集合数是一个那就是连通,否则不联通 要合并的两个顶点在相同集合内,表示出现了回路 输入时注意一下 #include<bits/stdc++.h> ...

  5. iOS逆向+越狱

    感觉本文涉及内容有点多的,但是自己不愿意写太多,就简单的谢谢关于ios上手的东西吧 初级入手不免要用到,pp助手,i4 tools等 iOS逆向-ipa包重签名及非越狱手机安装多个应用 1.常识 我们 ...

  6. 随机图片api

    什么是随机图片api 随机图片api是什么呢?通俗的讲就是当你访问一个api时,浏览器会随机返回给你一张图片. 其实原理很简单,把你要随机的图片放在一起,然后写一个php,当php被访问时,就随机指向 ...

  7. 一句话打印'*'图案(列表推导式, 人生苦短, 我用Python)

    ```python # coding=utf-8 print ('\n'.join(['*'*6 for i in range(4)])) # ****** # ****** # ****** # * ...

  8. 你这一辈子要用到的C数学函数都在这

       两数相加  #include <stdio.h> int main(void){ int a = 10;  //定义变量a, 把10 赋值给a int b = 20;  //定义变量 ...

  9. 提高JetBrains软件的性能

    在Java开发中,我用的开发工具是Idea,它是JetBrains公司旗下的产品. 电脑内存较大,但是Idea加载的慢,我们可以通过 \bin 下的 idea64.exe.vmoptions 和 id ...

  10. Java中 static、final和static final的特点及区别

    final: final可以修饰:属性,方法,类,局部变量(方法中的变量) final修饰的属性的初始化可以在编译期,也可以在运行时,初始化后不能被改变. final修饰的属性跟具体对象有关,在运行期 ...