最近看到一篇文章:“Transition、Transform和Animation使用简介及应用展示”    ,想看看里面 不同缓动类效果demo”例子的效果,发现了一个问题如下:

.Trans_Box :hover (冒号前空格)这个伪类只能作用于 .trans_box中的子元素,鼠标移到自身时只能激发其子元素的样式发生改变。

          (冒号前无空格)表示Trans_Box自身样式发生改变。

<!--Html部分代码-->
<div id="hhh" class="Trans_Box">
<div class="box linear">linear</div>
<div class="box ease">ease</div>
<div class="box easein">ease-in</div>
<div class="box easeout">ease-out</div>
<div class="box easeinout">ease-in-out</div>
</div>
/*CSS代码*/
.Trans_Box {
background:#CCC;
}
.box {
background:#09C;
border:black 1px solid;
font-size:150%;
width:100px;
height:100px;
margin:10px 0;
text-align:center;
}
.linear {
transition: all 4s linear;
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
}
.ease {
transition:all 4s ease;
-webkit-transition:all 4s ease;
}
.easein {
transition:all 4s ease-in;
-webkit-transition:all 4s ease-in;
}
.easeout {
transition:all 4s ease-out;
-webkit-transition:all 4s ease-out;
}
.easeinout {
transition:all 4s ease-in-out;
-webkit-transition:all 4s ease-in-out;
}
.Trans_Box :hover { //表示鼠标hover每个.box时,样式发生改变 //.Trans_Box:hover .box 表示鼠标hover Trans_Box时,每个box的样式发生改变,因此使用后一种方式定义才能达到连接中的效果
margin-left:89%;
background-color:#0CF;
border-radius:25px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
}

刚刚学习CSS3,以上是调试所得心得,如有错误,欢迎大家批评指正。

CSS3学习笔记——伪类hover的更多相关文章

  1. css3学习之--伪类与圆角

    随着css3.0的发布到逐渐完善,目前已经大部分浏览器已经能较好地适配,所以写一些css3的学习经历,分享心得,主要以案例讲解为主,话不多说,今天以css3的新增的“圆角”属性来讲解,基于web画一个 ...

  2. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

  3. 关于css伪类:hover的用法

    关于伪类:hover大家都用过,也比较熟悉.今天介绍一种新的用法(不是我发现的,但是以前一直没这么用过).在Chrome浏览器下,当a标签使用display:black;时a:hover的属性浏览器就 ...

  4. Java学习笔记——File类之文件管理和读写操作、下载图片

    Java学习笔记——File类之文件管理和读写操作.下载图片 File类的总结: 1.文件和文件夹的创建 2.文件的读取 3.文件的写入 4.文件的复制(字符流.字节流.处理流) 5.以图片地址下载图 ...

  5. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  6. python学习笔记4_类和更抽象

    python学习笔记4_类和更抽象 一.对象 class 对象主要有三个特性,继承.封装.多态.python的核心. 1.多态.封装.继承 多态,就算不知道变量所引用的类型,还是可以操作对象,根据类型 ...

  7. 【javascript/css】关于鼠标事件onmousexxx和css伪类hover

    在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...

  8. Java学习笔记之---类和对象

    Java学习笔记之---类和对象 (一)类 类是一个模板,它描述一类对象的行为和状态  例如:动物类是一个类,动物们都有属性:颜色,动物们都有行为:吃饭 public class Dog { Stri ...

  9. UML学习笔记:类图

    UML学习笔记:类图 有些问题,不去解决,就永远都是问题! 类图 类图(Class Diagrame)是描述类.接口以及它们之间关系的图,用来显示系统中各个类的静态结构. 类图包含2种元素:类.接口, ...

随机推荐

  1. linux httpd 服务的安装

    1.查看是否安装了httpd rpm -qa|grep httpd 2.安装httpd 使用yum 安装 yum -y install httpd 3.关闭防火墙和selinxu 4.使用fz软件或者 ...

  2. Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)

    1. copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. 2. copy.deepcopy 深拷贝 拷贝对象及其子对象 一个很好的例子: # -*-coding:utf-8 -*- ...

  3. 在线教学、视频会议 Webus Fox(2) 服务端开发手册

    上次在<在线教学.视频会议软件 Webus Fox(1)文本.语音.视频聊天及电子白板基本用法>里介绍了软件的基本用法.本文主要介绍服务器端如何配置.开发. 1. 配置 1.1 IIS配置 ...

  4. django rest_framework

    环境 django 1.6,rest_framework 3.3 ubuntu采用pip安装的rest_framework 按照例子一步步做下来 运行 提示filters.py第119行有错误form ...

  5. Redis使用总结之与Memcached异同

    Redis是什么?两句话可以做下概括: 1. 是一个完全开源免费的key-value内存数据库 2. 通常被认为是一个数据结构服务器,主要是因为其有着丰富的数据结构 strings.map. list ...

  6. C#设计模式(7)——适配器模式(Adapter Pattern)

    一.引言 在实际的开发过程中,由于应用环境的变化(例如使用语言的变化),我们需要的实现在新的环境中没有现存对象可以满足,但是其他环境却存在这样现存的对象.那么如果将“将现存的对象”在新的环境中进行调用 ...

  7. 将GitLab的数据库导入阿里云PostgreSQL RDS

    GitLab的数据库用的是PostgreSQL,之前由于阿里云RDS不支持PostgreSQL,只能将GitLab的数据库部署在云服务器上. 6月1日得知阿里云推出了PostgreSQL RDS,于是 ...

  8. [Hyper-V]制作一个干净的操作系统模板

    描述: 在Hyper-V里创建虚拟机的时候,我们可以先来创建一个干净的操作系统,将其制作为操作系统模板,该虚拟机的磁盘文件也将被视作基础磁盘以方便基于它创建差异化磁盘 安装其它虚拟机的时候就可以差异化 ...

  9. MongoDB中的字段类型Id

    众所周知,在向MongoDB的集合中添加一条记录时,系统会自动增加一个字段名为"_id",类型为ObjectId的字段,其值为24位字符串,可以使用此值作为记录的唯一标识. 项目中 ...

  10. [C++] socket - 5 [API事件对象实现线程同步]

    /*API事件对象实现线程同步*/ #include<windows.h> #include<stdio.h> DWORD WINAPI myfun1(LPVOID lpPar ...