css3中hover的使用细节
2021-04-13 01:28
标签：hover 旋转 tran 鼠标 例子 失效 应该 使用 伪类 元素添加hover伪类选择器时候一定要紧贴这hover，不能有空格，有空格的话会失效 错误例子： 正确例子： 当想要在父元素添加hover在子元素的实现效果 这个例子中就是当鼠标经过ul的时候，li会在设置的角度旋转 仅可以给自身的子元素设置样式，给其他元素子元素设置无效 css3中hover的使用细节 标签：hover 旋转 tran 鼠标 例子 失效 应该 使用 伪类 原文地址：https://www.cnblogs.com/blogwxb/p/12391234.html首先第一条很重要
ul :hover{} //ul后面有空格会失效
ul:hover{} // ul会显示出想要的效果
第二
子元素应该写在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);
}
注意
接着上个例子举例子：div:hover .one{} //不显示任何效果，hover失效