<!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. 短视频SDK简单易用——来自RDSDK.COM

    锐动天地为开发者提供短视频编辑.视频直播.特效.录屏.编解码.视频转换,等多种解决方案,涵盖PC.iOS.Android多平台.以市场为导向,不断打磨并创新技术,在稳定性,兼容性,硬件设备效率优化上千 ...

  2. centOS linux 下nginx编译安装详解

    Nginx的官方网站是 www.nginx.org   Nginx的下载地址是:http://nginx.org/en/download.html   由 于官网的设计非常简洁不大气不上档次,所以我们 ...

  3. System.Web.Optimization找不到引用怎么办

    新建Bootstap for MVC5出现的问题, 通过打开VS 工具->NUGET程序包管理器->控制台 输入以下命令进行完成,一切完成 Install-Package Microsof ...

  4. CAD嵌套打印（网页版）

    当用户需要打印两个CAD控件的图纸时,可以采用嵌套打印实现.点击此处在线演示. 实现嵌套打印功能,首先将两个CAD控件放入网页中,js代码如下: <p align="center&qu ...

  5. JavaSE-18 常用工具类

    学习要点 Object类 枚举 包装类 Math类 Random类 字符串处理 日期时间 Object类 1  什么是Object类 Object类存储在java.lang包中,是所有java类(Ob ...

  6. 216种Web安全颜色

    216种Web安全颜色 全部 JavaScript HTML5 jQuery CSS EXT Ajax Web综合 界面设计 DWR   锁定老帖子 主题:216种Web安全颜色 精华帖 (0) :: ...

  7. live555简介

    live555 编辑   目录 1live555简介 2Live555 Streaming Media整体框架 3openRTSP客户端流程     1live555简介编辑 Live555 是一个为 ...

  8. Linux 内核框架图

  9. LeetCode（43）Multiply Strings

    题目 Given two numbers represented as strings, return multiplication of the numbers as a string. Note: ...

  10. 集训第四周（高效算法设计）O题 (构造题)

    A permutation on the integers from 1 to n is, simply put, a particular rearrangement of these intege ...