<!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的使用)的更多相关文章

  1. CSS样式中visited，hover，active , focus这四个分别表示什么意思？

    CSS伪类用于向某些选择器添加特殊的效果.CSS又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺 ...

  2. 伪类link,hover,active,visited,focus的区别

    例一: /*css*/a:link{  color: blue;}a:visited{  color: green;}a:hover{  color: red;}a:focus{ color:blac ...

  3. a标签伪类link，hover，active，visited，focus区别

    <div id="content"> <h3><a class="a1" href="#">a标签伪类l ...

  4. 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

    1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...

  5. 如何消除移动端a标签点击时的蓝色底色以及a标签link、visited、hover、active的顺序

    1.消除a标签移动端点击时的蓝色底色 -webkit-tap-highlight-color:transparent 2.link.visited.hover.active的顺序 a:link{tex ...

  6. a:link,a:visited,a:hover,a:active

    1:解释 link:连接平常的状态 visited:连接被访问过之后 hover:鼠标放到连接上的时候 active:连接被按下的时候      详细的: :hover版本:CSS1/CSS2 兼容性 ...

  7. a标签的link、visited、hover、active的顺序

    a标签的link.visited.hover.active是有一定顺序的,以下是我一直在用的一个顺序,能正确显示四个颜色,我也不知道有没有其他的顺序能正确显示,如果你没办法判断哪个是对的,那就先用这个 ...

  8. 你知道hover、active这四个伪类为什么要按顺序写吗

    刨根问底,你知道:hover等4个伪类为什么要按顺序排列吗 引言 :link,:visited,:hover,:active这4个伪类大家都不陌生,4个伪类要按照LvHa这个爱恨原则来排(外国友人起的 ...

  9. css中链接的4个状态 link、visited 、hover、active 顺序与设置

    link       未点时链接色visited  已点过的链接色hover   光标放入链接上的色active   点击时的样式 顺序一定要按link.visited.hover.active来设置 ...

随机推荐

  1. [Luogu1848][USACO12OPEN]书架Bookshelf DP+set+决策单调性

    题目链接:https://www.luogu.org/problem/show?pid=1848 题目要求书必须按顺序放,其实就是要求是连续的一段.于是就有DP方程$$f[i]=min\{f[j]+m ...

  2. （6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记

    1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...

  3. 使用Jquery1.9 版本 来实现全选

    在使用Jquery实现全选以及反选的时候, 使用attr()实现的时候,在浏览器第一次运行可以全选,但是第二次再全选,不管用.  通过查找资料,用 prop()方法代替attr()方法就行了. 注意: ...

  4. Eclipse打包多渠道包

    下面介绍的是在eclipse中使用gradle进行多渠道打包(添加签名+混淆) 1,首先新建一个android测试项目,结构如下图所示: 2,选中右键选择expert->生成gradle文件,如 ...

  5. 使用Jenkins进行android项目的自动构建（4）

    加入单元测试 android单元测试很多都是使用Instrumentation进行的,这里讲的是试用JUnit,为什么用JUnit呢?因为使用Instrumentation需要打包apk安装,然后再进 ...

  6. JVM最多能创建多少个线程: unable to create new native thread

    转载自:http://www.rigongyizu.com/jvm-max-threads/ 有应用报出这样的异常“java.lang.OutOfMemoryError: unable to crea ...

  7. Python 保留n位小数

    输出a, b 且保留三位小数 a = 2.3456 b = 2.0000 三种方法: round(a, 3)('%.3f' % a)Decimal(a).quantize(Decimal('0.000 ...

  8. 升级openssh踩得坑

    升级背景: 项目中使用的系统为CentOS6.8,经过漏洞扫描后发现openssh高危漏洞,具体描述如下:OpenSSH 7.2p2之前版本, sshd/ session.c/ do_setup_en ...

  9. Nginx的初识

    今日刚接触了解到Nginx的反向代理,正向代理,并发,集群,同个站点不同域名的解析访问等等. 1.反向代理:Nginx充当一个桥接的作用,对用户和服务端进行链接,进行服务端的代理,这样有什么好处: a ...

  10. 字符串str.format()方法的个人整理

    引言: 字符串的内置方法大致有40来个,但是一些常用的其实就那么20几个,而且里面还有类似的用法,区分度高比如isalpha,isalnum,isdigit,还有一些无时不刻都会用到的split切分, ...