正文
csshover样式,css里的hover
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
css3有哪些不错的hover效果
CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦
效果一:360°旋转 修改rotate(旋转度数)
01 * {
02 transition:All 0.4s ease-in-out;
03 -webkit-transition:All 0.4s ease-in-out;
04 -moz-transition:All 0.4s ease-in-out;
05 -o-transition:All 0.4s ease-in-out;
06 }
07 *:hover {
08 transform:rotate(360deg);
09 -webkit-transform:rotate(360deg);
10 -moz-transform:rotate(360deg);
11 -o-transform:rotate(360deg);
12 -ms-transform:rotate(360deg);
13 }
效果二:放大 修改scale(放大的值)
01 * {
02 transition:All 0.4s ease-in-out;
03 -webkit-transition:All 0.4s ease-in-out;
04 -moz-transition:All 0.4s ease-in-out;
05 -o-transition:All 0.4s ease-in-out;
06 }
07 *:hover {
08 transform:scale(1.2);
09 -webkit-transform:scale(1.2);
10 -moz-transform:scale(1.2);
11 -o-transform:scale(1.2);
12 -ms-transform:scale(1.2);
13 }
效果三:旋转放大 修改rotate(旋转度数) scale(放大值)
01 * {
02 transition:All 0.4s ease-in-out;
03 -webkit-transition:All 0.4s ease-in-out;
04 -moz-transition:All 0.4s ease-in-out;
05 -o-transition:All 0.4s ease-in-out;
06 }
07 *:hover {
08 transform:rotate(360deg) scale(1.2);
09 -webkit-transform:rotate(360deg) scale(1.2);
10 -moz-transform:rotate(360deg) scale(1.2);
11 -o-transform:rotate(360deg) scale(1.2);
12 -ms-transform:rotate(360deg) scale(1.2);
13 }
效果四:上下左右移动 修改translate(x轴,y轴)
01 * {
02 transition:All 0.4s ease-in-out;
03 -webkit-transition:All 0.4s ease-in-out;
04 -moz-transition:All 0.4s ease-in-out;
05 -o-transition:All 0.4s ease-in-out;
06 }
07 *:hover {
08 transform:translate(0,-10px);
09 -webkit-transform:translate(0,-10px);
10 -moz-transform:translate(0,-10px);
11 -o-transform:translate(0,-10px);
12 -ms-transform:translate(0,-10px);
13 }
CSS里的hover样式
通过hover伪类了可以控制鼠标悬停在元素上的样式
例如,a:hover{color:red}在鼠标悬停到链接上时,链接变成红色
css的hover用法
元素添加hover伪类选择器时候一定要 紧贴 这hover, 不能有空格 ,有空格的话表示给该元素的所有子元素设置里hover样式。
错误例子:
ul :hover{} //ul的所有子元素设置了hover样式
正确例子:
ul:hover{} //ul会显示出想要的效果
ul:hover .one{ // 子元素写在hover后面空格隔开
transform:rotateY(90deg);
}
ul:hover .two{
transform:rotateY(0deg);
}
ul:hover .thr{
transform:rotateY(360deg);
}
仅可以给自身的子元素设置样式 ,给其他元素子元素设置无效
接着上个例子举例子:
div:hover .one{}//不显示任何效果,hover失效
给兄弟元素设置:
ul:hover+.one