CSS伪类选择器active模拟JavaScript点击事件
一、说明
设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
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点击事件的更多相关文章
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- 关于CSS伪类选择器
#CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...
- CSS伪类选择器 - nth-child(an+b):
CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-ch ...
- css伪类选择器的查找顺序
当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
- css伪类选择器详细解析及案例使用-----伪类选择器(1)
动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...
- 如何使用CSS伪类选择器
总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...
- css 伪类选择器制作登录框表单
使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色 使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果 <!DOCTYPE html> ...
随机推荐
- 《Mining the Web:Transforming Customer Data into Customer Value》读后札记
<Mining the Web:Transforming Customer Data into Customer Value> <Web数据挖掘:将客户数据转化为客户价值> — ...
- 查看电脑CPU核心数的方法
查看电脑CPU核心数的方法: 方法一: 同时按下[Ctrl+Shift+Esc]组合快捷键打开任务管理器: 点击[性能]就可以看出是几核CPU了: 方法二: 在计算机图标上面点击右键,选择“管理”: ...
- Android自定义Toast
1.http://www.cnblogs.com/salam/archive/2010/11/10/1873654.html 2.
- nginx location 或操作
location ~* (\.(7z|bat|bak|ini|log|rar|sql|swp|tar|zip|gz|git|asp|svn)|/phpmyadmin) { deny all; }
- 每天进步一点点——Linux中的文件描写叙述符与打开文件之间的关系
转载请说明出处:http://blog.csdn.net/cywosp/article/details/38965239 1. 概述 在Linux系统中一切皆能够看成是文件,文件又可分为:普通 ...
- go的map获取对应的key-value
场景: IP是个Key,string字符串是个值, 一个IP可以对应多个字符串. 代码如下: package main import ( "fmt" ) func main() { ...
- 基于docker的webrtc开发环境
在root目录下先放好自定义的constants.py文件再docker run 同时记得修改PUBLIC_IP 可以跨wifi通信 docker pull piasy/apprtc-server d ...
- mediawiki常用设置
修改mediawiki的logo图标 在LocalSettings.php文件中添加或修改以下代码: //$wgLogo = "$wgStylePath/common ...
- [浪风前端开发]JS获取当前时间戳的方法
由于最近在研究轻交互式web设计,所以整理了下面的东东,仅供分享测试学习交流之用. JavaScript 获取当前时间戳:第一种方法: var timestamp = Date.parse(new D ...
- 怎样利用kettle官方社区查找关于carte服务的设置
原创作品,出自 "深蓝的blog" 博客,转载时请务必注明出处.否则有权追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlong/ar ...