css3中hover的使用细节
首先第一条很重要
元素添加hover伪类选择器时候一定要紧贴这hover,不能有空格,有空格的话会失效
错误例子:
ul :hover{} //ul后面有空格会失效
正确例子:
ul:hover{} // ul会显示出想要的效果
第二
当想要在父元素添加hover在子元素的实现效果
子元素应该写在hover后面空格隔开
li{ width: 100px; height: 100px; border:1px solid #000; transition:transform 2s linear; } ul:hover .one{ // 子元素写在hover后面空格隔开 transform:rotateY(90deg); } ul:hover .two{ transform:rotateY(0deg); } ul:hover .thr{ transform:rotateY(360deg); } </style> </head> <body> <div style="width: 300px;height : 300px; background-color:#ccc"></div> <ul> <li class="one">di1ge</li> <li class="two">di2ge</li> <li class="thr">di3ge</li> </ul>
这个例子中就是当鼠标经过ul的时候,li会在设置的角度旋转
注意
仅可以给自身的子元素设置样式,给其他元素子元素设置无效
接着上个例子举例子:
div:hover .one{} //不显示任何效果,hover失效
相关推荐
HSdiana 2019-12-27
lunareclipse 2019-12-23
Uching 2006-11-13
PHP基础学习 2019-01-15
dazhifu 2019-07-01
刁连通 2019-01-15
NARUTOLUOLUO 2016-07-11
vavid 2016-01-16
yaodilu 2019-06-27
sorryericsson 2014-11-18
realitycss 2014-07-24
AlisaClass 2014-05-05