一、通过css方式来控制hover实现控制多个子div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="page02">
<h1>找到合适的职位</h1>
<div class="page02_box01" style="background: url(img/img-joinus/join-us-01.jpg);">
<p class="page02_box01_P">产品经理</p>
<div class="page02_wrap">
<h2>产品经理</h2>
<p>最激动人心的是，是将想法实现，并被数千用户所使用</p>
<a href="#">申请职位</a>
<span>产品经理<br/>JOSON</span>
</div>
</div>
<div class="page02_box01" style="background: url(img/img-joinus/join-us-02.jpg);">
<p class="page02_box01_P">产品经理</p>
<div class="page02_wrap">
<h2>产品运营</h2>
<p>运营的重点不只是营业额，而是让用户在这里获得更多乐趣</p>
<a href="#">申请职位</a>
<span>运营经理<br/>JOSON</span>
</div>
</div>
<div class="page02_box01" style="background: url(img/img-joinus/join-us-03.jpg);">
<p class="page02_box01_P">研发工程师</p>
<div class="page02_wrap">
<h2>研发工程师</h2>
<p>研发工程师可以参与产品的设计，写代码也可以发挥创意</p>
<a href="#">申请职位</a>
<span>研发经理<br/>JOSON</span>
</div>
</div>
</body>
对应的css样式为：
.page02{
width: 1170px;
margin: 0 auto;
}
.page02 h1{
font-size: 36px;
font-weight: 400;
color: #000;
margin: 0.67em 0;
text-align: center;
}
.page02_box01{
width: 210px;
height: 330px;
/*background: url(../img/img-joinus/join-us-01.jpg);*/
position: relative;
float: left;
margin: 12px;
-webkit-transition: .5s;
-moz-transition: .5s;
}
.page02_box01:hover .page02_box01_P{
opacity: 0;
}
.page02_box01:hover .page02_wrap{
opacity: 1;
}
.page02_box01_P{
position: absolute;
bottom: 0;
background: rgba(149,151,153,0.8);
width: 100%;
height: 37px;
color: #ffffff;
font-size: 18px;
line-height: 37px;
text-indent: 10px;
opacity:1;
}
.page02_wrap{
position: absolute;
bottom: 0;
background:rgba(37, 119, 227, 0.89);
}
.page02_wrap{
width: 100%;
height: 100px;
opacity: 0;
}
.page02_wrap h2{
text-align: left;
color: #ffffff;
text-indent: 10px;
margin-top: 6px;
font-size: 18px;
}
.page02_wrap p{
font-size: 12px;
color: #ffffff;
width: 193px;
margin: 0 auto;
margin-top: 5px;
}
.page02_wrap a{
font-size: 14px;
color: #ffffff;
margin-top: 11px;
margin-left: 9px;
display: inline-block;
}
.page02_wrap a:hover{
color: #FFFFFF;
font-weight: 600;
}
.page02_wrap span{
float: right;
margin-right: 5px;
text-align: right;
color: #ffffff;
font-size: 11px;
}
总结：通过hover标签控制opacity的值，鼠标经过时，第一层的div的opacity为0，隐藏层的div的opacity为1
效果前：
效果后：