hover的事件功能演示
2017-06-22 本文已影响197人
春木橙云
纯css实现事件绑定
默认情况下如果你想hover到一个元素上改变另外一个元素的CSS样式，被改变的元素必须是被hover元素的子元素，但你现在container和wrap不是父子关系，而是兄弟关系，那么你必须要这样设置了。
.container:hover +.wrap{
background: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" href="./css/ex.css">
</head>
<body>
<div class="box-all">
<div class="box">首页</div>
<div class="box">作品</div>
<div class="box box3">更多</div>
<div class="box-pull">
<div class="box2">github</div>
<div class="box2">知乎</div>
<div class="box2">微博</div>
</div>
</div>
</body>
</html>
css:
.box-all{
width: 600px;
margin:0 auto;
position: relative;
box-shadow: 2px 2px 8px #999;
border-radius: 5px;
}
.box-all:after{
display: block;
content: "";
clear: both;
}
.box{
float:left;
width: 70px;
height: 35px;
text-align: center;
line-height: 35px;
}
.box:hover{
background-color: #999;
}
.box2:hover{
background-color: green;
}
.box-pull{
position: absolute;
top: 37px;
left: 143px;
height: 100px;
width: 150px;
display: none;
}
.box2{
height: 33px;
line-height: 33px;
padding-left: 10px;
box-shadow: 2px 2px 8px #999;
}
.box-all>div:hover +.box-pull{
display: block;
}
