CSS3学习笔记——伪类hover
最近看到一篇文章:“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的更多相关文章
- css3学习之--伪类与圆角
随着css3.0的发布到逐渐完善,目前已经大部分浏览器已经能较好地适配,所以写一些css3的学习经历,分享心得,主要以案例讲解为主,话不多说,今天以css3的新增的“圆角”属性来讲解,基于web画一个 ...
- ::before ::after CSS3中的伪类和伪元素
::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...
- 关于css伪类:hover的用法
关于伪类:hover大家都用过,也比较熟悉.今天介绍一种新的用法(不是我发现的,但是以前一直没这么用过).在Chrome浏览器下,当a标签使用display:black;时a:hover的属性浏览器就 ...
- Java学习笔记——File类之文件管理和读写操作、下载图片
Java学习笔记——File类之文件管理和读写操作.下载图片 File类的总结: 1.文件和文件夹的创建 2.文件的读取 3.文件的写入 4.文件的复制(字符流.字节流.处理流) 5.以图片地址下载图 ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- python学习笔记4_类和更抽象
python学习笔记4_类和更抽象 一.对象 class 对象主要有三个特性,继承.封装.多态.python的核心. 1.多态.封装.继承 多态,就算不知道变量所引用的类型,还是可以操作对象,根据类型 ...
- 【javascript/css】关于鼠标事件onmousexxx和css伪类hover
在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...
- Java学习笔记之---类和对象
Java学习笔记之---类和对象 (一)类 类是一个模板,它描述一类对象的行为和状态 例如:动物类是一个类,动物们都有属性:颜色,动物们都有行为:吃饭 public class Dog { Stri ...
- UML学习笔记:类图
UML学习笔记:类图 有些问题,不去解决,就永远都是问题! 类图 类图(Class Diagrame)是描述类.接口以及它们之间关系的图,用来显示系统中各个类的静态结构. 类图包含2种元素:类.接口, ...
随机推荐
- codeforces 425E
题意:对于[l1, r1], [l2, r2]...[lm, rm]线段组成的一个集合S,我们定义f(S)为最大的不相交(没有任何公共点)线段数,现在给定n及k,n表示线段范围,即任何[li, ri] ...
- 01背包问题:Charm Bracelet (POJ 3624)(外加一个常数的优化)
Charm Bracelet POJ 3624 就是一道典型的01背包问题: #include<iostream> #include<stdio.h> #include& ...
- Linux 配置主机名
方法 1:临时配置 [root@NING ~]# hostname NING CRT重新连接即可,服务器重启失效. 方法 2:永久配置 步骤1:包含了主机最基本的网络信息,用于系统启动. [root@ ...
- 第12周&第13周
12&13:STL Standard Template Library sort, binary_search/lower_bound/upper_bound, multiset, set, ...
- 从SQLSERVER/MYSQL数据库中随机取一条或者N条记录
从SQLSERVER/MYSQL数据库中随机取一条或者N条记录 很多人都知道使用rand()函数但是怎麽使用可能不是每个人都知道 建立测试表 USE [sss] GO ,NAME ) DEFAULT ...
- Http Status 参考
http://tool.oschina.net/commons?type=5 状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户 ...
- [游戏模版19] Win32 物理引擎 匀速运动
>_<:Learning the physical engine >_<:resource >_<:code #include <windows.h> ...
- iOS开发-UITableView滑动视差
视差滚动是指让多层背景以不同的速度移动,形成立体的运动效果,在Web上应用的比较多,App中倒是见的相对比较少,主要在UITableView中的应用的比较多,尤其是当整个UITableViewCell ...
- Leetcode 344 Reverse String 字符串处理
题意:反转字符串,用好库函数. class Solution { public: string reverseString(string s) { reverse(s.begin(),s.end()) ...
- Vue.js进阶
<!-- 动态Props --><!DOCTYPE html> <html lang='utf-8'> <head> <meta charset= ...