<!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <style type="text/css"> .wrap {width: 500px height: 500px margin: 0 auto border: 1px solid blue }.con {width: 80% height: 100px margin: 40px auto border: 1px solid black }/*必须在父级hover，兼容：IE6+*/.one:hover p {color: red }/*标签内要加data-title属性，兼容：IE9+*/.two:hover::before {content: attr(data-title)/*取到data-title属性的值*/color: green }.three:hover::after {content: attr(data-title)/*取到data-title属性的值*/color: blue }</style> <body> <p> <p class="con one"> <span>鼠标移进来</span> <p>颜色会变哦</p> </p> <p class="con two" data-title="看我七十二变"> <span>鼠标移进来</span> <p>文字会变哦</p> </p> <p class="con three" data-title="看我七十二变"> <span>鼠标移进来</span> <p>文字会变哦</p> </p> </p> </body></html>元素添加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
