開心了才會思考
讓我掉坑里的問題姻僧、规丽、、
相信學(xué)前端的對CSS hover都很熟悉吧撇贺。赌莺。。接下啦我分享一下我是怎么掉在hover這個坑里的松嘶，問題出自我的女朋友艘狭。她在做一個網(wǎng)站，大家應(yīng)該逛過不少網(wǎng)站翠订，比如淘寶巢音。所有網(wǎng)站header部分的nav都會有hover的效果，至于是怎么實現(xiàn)的尽超。這就看程序猿的心情啦官撼。
hover 的第一種情況——兄弟
下面是代碼。
看代碼之前我強調(diào)一點似谁，兩個級別一樣的div產(chǎn)生hover效果時應(yīng)該這樣寫
//這里的hover是當鼠標指向class名為class1的Div時 class名為class2的Div發(fā)生改變
.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旋轉(zhuǎn)</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>
說的這里也就應(yīng)該結(jié)束啦。顷链。我是一只菜鳥目代。就是喜歡死折騰。
