一、说明

设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active。

另:如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现。超链接的4种状态,需要有特定的书写顺序才能生效。注意,a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后。可靠的顺序是:l(link)ov(visited)e h(hover)a(active)te,即用喜欢(love)和讨厌(hate)两个词来概括。Link

二、示例

<style>
.active-example{
width:100px;
height: 100px;
transition: all 1s ease-in-out;
background: red;
}
.active-example:active{
border-radius:50%;
background: blue;
}
</style>
<div class="active-example"></div>

 

CSS伪类选择器active模拟JavaScript点击事件

CSS伪类选择器active模拟JavaScript点击事件的更多相关文章

  1. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  2. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  3. CSS伪类选择器 - nth-child(an+b):

    CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-ch ...

  4. css伪类选择器的查找顺序

    当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...

  5. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  6. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  7. css伪类选择器详细解析及案例使用-----伪类选择器(1)

    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...

  8. 如何使用CSS伪类选择器

    总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...

  9. css 伪类选择器制作登录框表单

    使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色 使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果 <!DOCTYPE html> ...

随机推荐

  1. Java线程总结(转)

    作者的blog:(http://blog.matrix.org.cn/page/Kaizen) 首先要理解线程首先须要了解一些主要的东西,我们如今所使用的大多数操作系统都属于多任务,分时操作系统.正是 ...

  2. 51单片机 | 1-Wire总线及应用实例

    ———————————————————————————————————————————— 1-Wire总线 - - - - - - - - - - - - - - - - - - - - - - - ...

  3. C# JSON序列化日期格式问题

    默认序列化日期为1970至今的时间戳 需要在json.convert中做一些设置 //JavaScriptSerializer js = new JavaScriptSerializer(); Iso ...

  4. Effective C++ 条款47

    本节条款的题目:请使用trait classes来表示类型信息 本节条款主要讲述的技术是怎样在编译期间实现对迭代器类型的推断,依据推断的类型进行最优处理. 我们先来看一下迭代器的种类: 1.input ...

  5. 2B01-View-Switcher

    Gallery和swithcer联合使用 /* * Copyright (C) 2007 The Android Open Source Project * * Licensed under the ...

  6. Atitit.attilax的 case list 项目经验 案例列表

    Atitit.attilax的 case list 项目经验 案例列表 1. Atian inputmethod 输入法3 2. Ati desktop engine桌面引擎3 3. Acc资金账户系 ...

  7. Atitit.一些公司的开源项目 重大知名开源项目attilax总结

    Atitit.一些公司的开源项目 重大知名开源项目attilax总结 1. Twitter--Bootstrap:1 2. Google2 2.1. Gson2 2.2. Angular.Js2 2. ...

  8. linux学习之vimrc配置推荐

    ,gb2312,gbk,gb18030,big5 "去掉vi一致性 set nocompatible ""设置行号 set number "打开文件类型自动检测 ...

  9. Python内置函数之open()

    open(file, mode=, encoding=None, errors=None, newline=None, closefd=True, opener=None) 打开一个文件,返回一个对应 ...

  10. Django学习之URLconf

    Django处理request的步骤: 1.确定根URLconf 2.载入urls.py,找到变量urlpatterns,urlpatterns是django.conf.urls.url()的实例对象 ...