探讨hover在以下背景下的使用技巧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#zxw{
width: 400px;height: 400px;background: #000;
}
.zxw2{
width: 150px;height: 150px;background: #ff0000;
}
</style>
</head>
<body>
<!-元素在hover状态时:-->
<!-1.可以设置自己或后代元素的属性。-->
<!-2.可以设置自己之后兄弟元素的属性。-->
<!-3.元素在hover状态时，不能将触发的作用变化设置在祖先元素上。-->
<div id="zxw">
<div class="zxw2">
<p>我要自学网</p>
</div>
</div>
</body>
</html>
问题1
给类名为zxw2的标签设置hover态，（元素在hover状态时可以对自己进行任何的样式设置，说简单点在元素在hover状态时可以对自己生效，）即给自己设置hover状态，作用结果在自己的标签上）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#zxw{
width: 400px;height: 400px;background: #000;
}
.zxw2{
width: 150px;height: 150px;background: #ff0000;
}
.zxw2:hover{
width: 300px;height: 300px;background: #00ff00;
}
</style>
</head>
<body>
<div id="zxw">
<div class="zxw2">
<p>我要自学网</p>
</div>
</div>
</body>
</html>
问题2
元素在hover状态时，也可以对自己的子元素生效（即给父元素设置hover状态，但作用结果在子元素的标签上）这里zxw设置hover状态则变化的是zxw2，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#zxw{
width: 400px;height: 400px;background: #000;
}
.zxw2{
width: 150px;height: 150px;background: #ff0000;
}
#zxw:hover .zxw2{
width: 300px;height: 300px;background: #00ff00;
}
</style>
</head>
<body>
<div id="zxw">
<div class="zxw2">
<p>我要自学网</p>
</div>
</div>
</body>
</html>
问题3
在鼠标移到id="zxw"的div时，作用发生在后代的p元素进行控制（爷爷和孙子的关系）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#zxw{
width: 400px;height: 400px;background: #000;
}
.zxw2{
width: 150px;height: 150px;background: #ff0000;
}
#zxw:hover .zxw2 p{
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<div id="zxw">
<div class="zxw2">
<p>我要自学网</p>
</div>
</div>
</body>
</html>
问题4
元素在hover状态时，可以设置自己之后的兄弟元素的属性
< p>我要自学网< /p>
< p>我要自学网< /p>
< p id=“zxw3”>我要自学网< /p>
< p>我要自学网< /p>
< p>我要自学网< /p>
设置了 id="zxw3"的元素为hover状态时，其作用结果可以设置在自己之后的第一个兄弟元素的属性上（如 即 id="zxw3后的p元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#zxw{
width: 400px;height: 400px;background: #000;
}
.zxw2{
width: 150px;height: 400px;background: #ff0000;
}
#zxw3:hover+p{
color: #fff;font-size: 20px;
}
</style>
</head>
<body>
<div id="zxw">
<div class="zxw2">
<p>我要自学网</p>
<p>我要自学网</p>
<p id="zxw3">我要自学网</p>
<p>我要自学网</p>
<p>我要自学网</p>
</div>
</div>
</body>
</html>
设置了 id="zxw3"的元素为hover状态时，其作用结果可以设置在自己之后的所有兄弟元素的属性上（如 即 id="zxw3后的p元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#zxw{
width: 400px;height: 400px;background: #000;
}
.zxw2{
width: 150px;height: 400px;background: #ff0000;
}
#zxw3:hover~p{
color: #fff;font-size: 20px;
}
</style>
</head>
<body>
<div id="zxw">
<div class="zxw2">
<p>我要自学网</p>
<p>我要自学网</p>
<p id="zxw3">我要自学网</p>
<p>我要自学网</p>
<p>我要自学网</p>
<p>我要学习</p>
</div>
</div>
</body>
</html>
