开心了才会思考
让我掉坑里的问题、、、
相信学前端的对CSS hover都很熟悉吧。。。接下啦我分享一下我是怎么掉在hover这个坑里的，问题出自我的女朋友。她在做一个网站，大家应该逛过不少网站，比如淘宝。所有网站header部分的nav都会有hover的效果，至于是怎么实现的。这就看程序猿的心情啦。
hover 的第一种情况——兄弟
下面是代码。
看代码之前我强调一点，两个级别一样的div产生hover效果时应该这样写
//这里的hover是当鼠标指向class名为class1的Div时 class名为class2的Div发生改变
.class1:hover+.class2{
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HOVER</title>
<style type="text/css">
.wrap ,.box{
height: 100px;
text-align: center;
line-height: 100px;
width: 100px;
background: cyan;
border: 1px solid black;
display: inline-block;
}
.wrap:hover+.box{
background: red;
}
</style>
</head>
<body>
<div class="wrap">我是老大
</div>
<div class="box">我是老二
</div>
</body>
<script type="text/javascript">
</script>
</html>
hover 的第二种情况——self（本身）
这个简单啦，我就不多说啦
![
self.png . . .]
](http://upload-images.jianshu.io/upload_images/2725302-9dea60e65e92c2a6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HOVER</title>
<style type="text/css">
.wrap{
height: 100px;
text-align: center;
line-height: 100px;
width: 100px;
background: cyan;
border: 1px solid black;
display: inline-block;
}
.wrap:hover{
background: red;
}
</style>
</head>
<body>
<div class="wrap">我是老大
</div>
</body>
<script type="text/javascript">
</script>
</html>
hover 的第三种情况——兄弟的儿子
![WNDEL%)W_XCZ1~T{7]S40)T.png](http://upload-images.jianshu.io/upload_images/2725302-965c4ac37daa84dc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
———————————————————————————
![R]HF3EP(KTY~2](}$_]7K9N.png](http://upload-images.jianshu.io/upload_images/2725302-99d587f2b75a743b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这里我要说的是兄弟之间 老大可以直接hover到老二的儿子。但老大的儿子不到hover到老二的儿子。也就是说兄弟不但可以影响到兄弟，还可以影响到兄弟的儿子。但是兄弟的儿子之间互不影响
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3D旋转</title>
<style type="text/css">
.wrap ,.box{
height: 100px;
text-align: center;
width: 100px;
background: cyan;
border: 1px solid black;
display: inline-block;
}
.box1{
height: 60px;
width: 60px;
background: peachpuff;
}
.wrap:hover+.box .box1{
background: red;
}
</style>
</head>
<body>
<div class="wrap">我是老大
</div>
<div class="box">
<div class="box1">我是老二的儿子</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
说的这里也就应该结束啦。。我是一只菜鸟。就是喜欢死折腾。
