选择器(E:hover/E:active/E:focus的使用)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
input[type=text]:hover {
background-color:limegreen;
}
input[type=text]:active {
background-color:skyblue;
}
input[type=text]:focus{
background-color:#00ff90;
}
</style>
</head>
<body>
<!-- E:hover
选择器被用来指定当鼠标指针移动到元素上时,元素所使用的样式,方法如下:
<元素>:hover
{
//指定样式。
}
-->
<!-- E:active
选择器被用来指定元素被激活(就是按下没有释放时)所使用的样式。 -->
<!-- E:focus
选择器被用来指定元素获取焦点时所使用的样式。 -->
<form>
<p>姓名:<input type="text" name="name" /></p>
<p>地址:<input type="text" name="address" /></p>
</form>
</body>
</html>
效果如下:
选择器(E:hover/E:active/E:focus的使用)的更多相关文章
- CSS样式中visited,hover,active , focus这四个分别表示什么意思?
CSS伪类用于向某些选择器添加特殊的效果.CSS又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺 ...
- 伪类link,hover,active,visited,focus的区别
例一: /*css*/a:link{ color: blue;}a:visited{ color: green;}a:hover{ color: red;}a:focus{ color:blac ...
- a标签伪类link,hover,active,visited,focus区别
<div id="content"> <h3><a class="a1" href="#">a标签伪类l ...
- 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...
- 如何消除移动端a标签点击时的蓝色底色以及a标签link、visited、hover、active的顺序
1.消除a标签移动端点击时的蓝色底色 -webkit-tap-highlight-color:transparent 2.link.visited.hover.active的顺序 a:link{tex ...
- a:link,a:visited,a:hover,a:active
1:解释 link:连接平常的状态 visited:连接被访问过之后 hover:鼠标放到连接上的时候 active:连接被按下的时候 详细的: :hover版本:CSS1/CSS2 兼容性 ...
- a标签的link、visited、hover、active的顺序
a标签的link.visited.hover.active是有一定顺序的,以下是我一直在用的一个顺序,能正确显示四个颜色,我也不知道有没有其他的顺序能正确显示,如果你没办法判断哪个是对的,那就先用这个 ...
- 你知道hover、active这四个伪类为什么要按顺序写吗
刨根问底,你知道:hover等4个伪类为什么要按顺序排列吗 引言 :link,:visited,:hover,:active这4个伪类大家都不陌生,4个伪类要按照LvHa这个爱恨原则来排(外国友人起的 ...
- css中链接的4个状态 link、visited 、hover、active 顺序与设置
link 未点时链接色visited 已点过的链接色hover 光标放入链接上的色active 点击时的样式 顺序一定要按link.visited.hover.active来设置 ...
随机推荐
- js面向对象之构造函数
最简单的面向对象程序<script type="text/javascript"> var obj = new Object(); obj.qq = '10791611 ...
- 高仿人人网客户端Android版项目源码
高仿人人网客户端,有兴趣的盆友可以研究下,里面主要包含的一些UI设计与交互.(注:项目中有少许问题,apk能运行,希望开发者可以参考代码研究一下.) 源码下载:http://code.662p.com ...
- Android(java)学习笔记202:JNI之hello.c(c代码功能实现)指针语法解析
1. 接下来我们细讲分析一下前面一讲中,c功能实现的代码: (1)hello.c : #include <jni.h> char* getHello() { //////// return ...
- C#通过post发送接收数据流
发送数据流方法 /// <summary> /// /// </summary> /// <param name="url">目标url< ...
- Vue+Bootstrap实现购物车程序(3)
效果展示:(说明:使用webpack重构购物车程序,使用vue-cli生成项目脚手架) 文件结构: 代码: (1)将原来编写的btn-grp组件单独编写到BtnGrp.vue文件中 可以看到现在代码清 ...
- clipboard 实现复制
html <textarea id="bar" cols="62" rows="5" autocomplete="off&q ...
- js 实现弹力球效果
1.html代码: <div id='imgid'> <img src="img/5.png"> </div> 2.js代码: imgobj=d ...
- 只允许特定IP访问本网站的前端写法
在开发的过程中,有时会遇到只允许特定的几个IP访问.今天来记录一下前端的写法. 首先,引入 <script src="http://pv.sohu.com/cityjson?ie=ut ...
- BZOJ2212【POI2011】ROT:Tree Rotation 线段树合并
题意: 给一棵n(1≤n≤200000个叶子的二叉树,可以交换每个点的左右子树,要求叶子遍历序的逆序对最少. 分析: 求逆序对我们可以想到权值线段树,所以我们对每个点建一颗线段树(为了避免空间爆炸,采 ...
- mysql 存储过程批量删除重复数据
表结构: LOAD DATA INFILE '/usr/local/phone_imsi_12' replace INTO TABLE tbl_imsi2number_new FIELDS TERMI ...