最近看到一篇文章:“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. codeforces 425E

    题意:对于[l1, r1], [l2, r2]...[lm, rm]线段组成的一个集合S,我们定义f(S)为最大的不相交(没有任何公共点)线段数,现在给定n及k,n表示线段范围,即任何[li, ri] ...

  2. 01背包问题:Charm Bracelet (POJ 3624)(外加一个常数的优化)

    Charm Bracelet    POJ 3624 就是一道典型的01背包问题: #include<iostream> #include<stdio.h> #include& ...

  3. Linux 配置主机名

    方法 1:临时配置 [root@NING ~]# hostname NING CRT重新连接即可,服务器重启失效. 方法 2:永久配置 步骤1:包含了主机最基本的网络信息,用于系统启动. [root@ ...

  4. 第12周&第13周

    12&13:STL Standard Template Library sort, binary_search/lower_bound/upper_bound, multiset, set, ...

  5. 从SQLSERVER/MYSQL数据库中随机取一条或者N条记录

    从SQLSERVER/MYSQL数据库中随机取一条或者N条记录 很多人都知道使用rand()函数但是怎麽使用可能不是每个人都知道 建立测试表 USE [sss] GO ,NAME ) DEFAULT ...

  6. Http Status 参考

    http://tool.oschina.net/commons?type=5 状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户 ...

  7. [游戏模版19] Win32 物理引擎 匀速运动

    >_<:Learning the physical engine >_<:resource >_<:code #include <windows.h> ...

  8. iOS开发-UITableView滑动视差

    视差滚动是指让多层背景以不同的速度移动,形成立体的运动效果,在Web上应用的比较多,App中倒是见的相对比较少,主要在UITableView中的应用的比较多,尤其是当整个UITableViewCell ...

  9. Leetcode 344 Reverse String 字符串处理

    题意:反转字符串,用好库函数. class Solution { public: string reverseString(string s) { reverse(s.begin(),s.end()) ...

  10. Vue.js进阶

    <!-- 动态Props --><!DOCTYPE html> <html lang='utf-8'> <head> <meta charset= ...