蒙版怎样做？？我一直实现不了这个效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Cake Shop</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="jquery-3.3.1.js"></script> <link rel="stylesheet" href="Cake%20Shop%20Style.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <!--header--> <header> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-2"> IMOOC </div> <div class="col-md-2 active"> 首页 </div> <div class="col-md-2"> <div class="dropdown"> <div class="dropdown-toggle" data-toggle="dropdown"> 生日 <span class="caret"></span> </div> <ul class="dropdown-menu"> <li> <ul> <li><a href="#">关系</a></li> <li role="separator" class="divider"></li> <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </ul> </li> <li> <ul> <li><a href="#">风味</a></li> <li role="separator" class="divider"></li> <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> </ul> </li> </ul> </div> </div> <div class="col-md-2"> <div class="dropdown"> <div class="dropdown-toggle" data-toggle="dropdown"> 婚礼 <span class="caret"></span> </div> <ul class="dropdown-menu"> <li> <ul> <li><a href="#">关系</a></li> <li role="separator" class="divider"></li> <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </ul> </li> <li> <ul> <li><a href="#">风味</a></li> <li role="separator" class="divider"></li> <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> </ul> </li> <li> <ul> <li><a href="#">主旋律</a></li> <li role="separator" class="divider"></li> <li><a href="#">心形</a></li> <li><a href="#">卡通</a></li> </ul> </li> </ul> </div> </div> <div class="col-md-2"> <div class="dropdown"> <div class="dropdown-toggle" data-toggle="dropdown"> 专用 <span class="caret"></span> </div> <ul class="dropdown-menu"> <li> <ul> <li><a href="#">关系</a></li> <li role="separator" class="divider"></li> <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </ul> </li> <li> <ul> <li><a href="#">风味</a></li> <li role="separator" class="divider"></li> <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> </ul> </li> </ul> </div> </div> <div class="col-md-2"> <div class="dropdown"> <div class="dropdown-toggle" data-toggle="dropdown"> 商铺 <span class="caret"></span> </div> <ul class="dropdown-menu"> <li> <ul> <li><a href="#">关系</a></li> <li role="separator" class="divider"></li> <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </ul> </li> <li> <ul> <li><a href="#">风味</a></li> <li role="separator" class="divider"></li> <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> </ul> </li> </ul> </div> </div> </div> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"> <div class="row"> <div class="col-md-4 first"> <span class="glyphicon glyphicon-search"></span> <div class="glyphicon glyphicon-triangle-top"></div> <div class="search"> <form> <input type="text" name="search"> <button>搜</button> </form> </div> </div> <div class="col-md-4 second"> <span class="glyphicon glyphicon-user"></span> <div class="glyphicon glyphicon-triangle-top"></div> <div class="loginInfo"> <form> <label class="eamil" for="email">Email</label> <input type="email" name="email" id="email"> <label class="password" for="password">Password</label> <input type="password" id="password" name="password"> <button>登陆</button> <input type="radio" id="radio"> <span>记住</span> <p>新用户？<a href="#">注册</a> | 忘记密码?</p> </form> </div> </div> <div class="col-md-4 third"> <span class="glyphicon glyphicon-shopping-cart"></span> <div class="glyphicon glyphicon-triangle-top"></div> <div class="shopping"> <div>$0.00(0)</div> <button>空</button> </div> </div> </div> </div> </div> </div> </div> </div> </header> <!--banner--> <section class="banner"> <div class="container"> <div class="col-md-4"> <div> <p> <span>IMOOC</span> <span>蛋糕</span> </p> <p>特别的日子特别的你</p> <button>SHOP NOW</button> </div> </div> <div class="col-md-4"></div> <div class="col-md-4"> <IMG src="img/2.png"> </div> </div> </section> <!--gallery--> <section class="gallery"> <div class="container"> <div class="row"> <div class="col-md-8"> <dl> <dt><img src="img/g1.jpg"></dt> <dd><div class="glyphicon glyphicon-eye-open fade"> <a href="#">view</a><button>SHOP NOW</button></div></dd> <dd>happy birthday</dd> <dd> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </dd> </dl> </div> <div class="col-md-4"> <dl> <dt><img src="img/g2.jpg"></dt> <dd><div class="glyphicon glyphicon-eye-open fade"> <a href="#">view</a><button>SHOP NOW</button></div></dd> <dd>happy birthday</dd> <dd> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </dd> </dl> </div> </div> <div class="row"> <div class="col-md-3"> <dl> <dt><img src="img/g3.png"></dt> <dd><div class="glyphicon glyphicon-eye-open fade"> <a href="#">view</a><button>SHOP NOW</button></div></dd> <dd>happy birthday</dd> <dd> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </dd> </dl> </div> <div class="col-md-3"> <dl> <dt><img src="img/g4.png"></dt> <dd><div class="glyphicon glyphicon-eye-open fade"> <a href="#">view</a><button>SHOP NOW</button></div></dd> <dd>happy birthday</dd> <dd> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </dd> </dl> </div> <div class="col-md-3"> <dl> <dt><img src="img/g5.png"></dt> <dd><div class="glyphicon glyphicon-eye-open fade"> <a href="#">view</a><button>SHOP NOW</button></div></dd> <dd>happy birthday</dd> <dd> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </dd> </dl> </div> <div class="col-md-3"> <dl> <dt><img src="img/g6.png"></dt> <dd><div class="glyphicon glyphicon-eye-open fade"> <a href="#">view</a><button>SHOP NOW</button></div></dd> <dd>happy birthday</dd> <dd> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </dd> </dl> </div> </div> <div class="row"> <div class="col-md-3"> <dl> <dt><img src="img/g7.png"></dt> <dd><div class="glyphicon glyphicon-eye-open fade"> <a href="#">view</a><button>SHOP NOW</button></div></dd> <dd>happy birthday</dd> <dd> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </dd> </dl> </div> <div class="col-md-3"> <dl> <dt><img src="img/g8.png"></dt> <dd><div class="glyphicon glyphicon-eye-open fade"> <a href="#">view</a><button>SHOP NOW</button></div></dd> <dd>happy birthday</dd> <dd> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </dd> </dl> </div> <div class="col-md-3"> <dl> <dt><img src="img/g9.png"></dt> <dd><div class="glyphicon glyphicon-eye-open fade"> <a href="#">view</a><button>SHOP NOW</button></div></dd> <dd>happy birthday</dd> <dd> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </dd> </dl> </div> <div class="col-md-3"> <dl> <dt><img src="img/g10.png"></dt> <dd><div class="glyphicon glyphicon-eye-open fade"> <a href="#">view</a><button>SHOP NOW</button></div></dd> <dd>happy birthday</dd> <dd> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </dd> </dl> </div> </div> </div> </section> <script src="Cake%20Shop%20Event.js"></script> </body> </html>
html{
background-color: powderblue;
font-family: "Microsoft YaHei";
}
/*header*/
/*header logo and left-nav*/
header{
width: 100%;
height: 50px;
background: #5D4B33;
}
header .container{
height: 50px;
}
header .container .col-md-6{
height: 50px;
}
.active{
background-color: orange;
}
header .container .col-md-2:nth-child(1){
padding-left: 0;
font-size: 20px;
}
header .container .col-md-2:nth-child(1){
color: white;
line-height: 50px;
text-align: center;
}
header .container .col-md-2:nth-child(2),
header .container .col-md-2:nth-child(3),
header .container .col-md-2:nth-child(4),
header .container .col-md-2:nth-child(5),
header .container .col-md-2:nth-child(6){
color: white;
line-height: 50px;
text-align: center;
border-right: 1px solid gray;
}
header .container .col-md-2:nth-child(1):hover{
cursor: pointer;
}
header .container .col-md-2:nth-child(2):hover,
header .container .col-md-2:nth-child(3):hover,
header .container .col-md-2:nth-child(4):hover,
header .container .col-md-2:nth-child(5):hover,
header .container .col-md-2:nth-child(6):hover{
cursor: pointer;
background-color: #F07818;
}
header .container .col-md-2 a:hover{
text-decoration: none;
}
header .container .col-md-4{
color: white;
line-height: 50px;
text-align: center;
}
header .container .col-md-4:hover{
cursor: pointer;
}
header .container .dropdown-menu{
padding-top: 20px;
width: 500px;
}
header .container .dropdown-menu>li{
display: inline-block;
float: left;
}
header .container .dropdown-menu>li>ul>li{
width: 100px;
line-height: 30px;
}
header .container .dropdown-menu>li>ul>li:nth-child(1) a{
color: orange;
font-size: 20px;
}
header .container .dropdown-menu>li>ul>li:nth-child(3) a,
header .container .dropdown-menu>li>ul>li:nth-child(4) a,
header .container .dropdown-menu>li>ul>li:nth-child(5) a{
color: gray;
}
header .container .dropdown-menu>li>ul>li:nth-child(3) a:hover,
header .container .dropdown-menu>li>ul>li:nth-child(4) a:hover,
header .container .dropdown-menu>li>ul>li:nth-child(5) a:hover{
color: orange;
}
/*header right-nav*/
header .container .col-md-4{
position: relative;
border-right: 1px solid gray;
}
header .container .first .glyphicon-triangle-top{
position: absolute;
top: 41px;
left: 50%;
margin-left: -8px;
display: none;
}
header .container .col-md-4 .search{
position: absolute;
width: 250px;
height: 70px;
top: 50px;
left: -170%;
background: white;
text-align: center;
display: none;
}
header .container .col-md-4 .search input{
position: absolute;
width: 150px;
height: 30px;
top: 50%;
margin-top: -15px;
left: 50%;
margin-left: -95px;
border: 1px solid orange;
outline-style: none;
color: gray;
padding: 5px;
}
header .container .col-md-4 .search button{
position: absolute;
width: 40px;
height: 30px;
top: 50%;
margin-top: -15px;
right: 50%;
margin-right: -95px;
border: 1px solid orange;
background-color: orange;
text-align: center;
line-height: 30px;
outline-style: none;
}
header .container .second .glyphicon-triangle-top{
position: absolute;
top: 41px;
left: 50%;
margin-left: -7px;
display: none;
}
header .container .col-md-4 .loginInfo{
position: absolute;
width: 250px;
height: 280px;
top: 50px;
left: -170%;
background: white;
display: none;
}
header .container .second .loginInfo label:nth-child(1){
display: block;
position: absolute;
left: 20px;
color: gray;
font-weight: normal;
}
header .container .second .loginInfo #email{
display: block;
position: absolute;
top: 40px;
left: 20px;
width: 210px;
height: 30px;
outline-style: none;
padding: 5px;
color: gray;
border: 1px solid gray;
}
header .container .second .loginInfo label:nth-child(3){
display: block;
position: absolute;
left: 20px;
top: 70px;
color: gray;
font-weight: normal;
}
header .container .second .loginInfo #password{
display: block;
position: absolute;
top: 110px;
left: 20px;
width: 210px;
height: 30px;
outline-style: none;
padding: 5px;
color: gray;
border: 1px solid gray;
}
header .container .second .loginInfo button{
display: block;
position: absolute;
top: 160px;
left: 20px;
width: 210px;
height: 30px;
background-color: orange;
color: white;
border-style: none;
outline-style: none;
line-height: 30px;
text-align: center;
}
header .container .second .loginInfo button:hover{
background-color: white;
color: orange;
border: 1px solid orange;
}
header .container .second .loginInfo #radio{
display: block;
position: absolute;
top: 200px;
left: 20px;
}
header .container .second .loginInfo span{
display: block;
position: absolute;
top: 203px;
left: 50px;
font-size: 13px;
line-height: 13px;
font-style: italic;
color: gray;
}
header .container .second .loginInfo p{
display: block;
position: absolute;
top: 240px;
width: 250px;
text-align: center;
font-size: 13px;
line-height: 13px;
color: gray;
}
header .container .second .loginInfo p a{
text-decoration: none;
color: orange;
}
header .container .third .glyphicon-triangle-top{
position: absolute;
top: 41px;
left: 50%;
margin-left: -7px;
display: none;
}
header .container .col-md-4 .shopping{
position: absolute;
width: 150px;
height: 110px;
top: 50px;
left: -65%;
background: white;
color: gray;
display: none;
}
header .container .col-md-4 .shopping button{
width: 80%;
height: 30px;
line-height: 30px;
text-align: center;
color: white;
background: orange;
border-style: none;
outline-style: none;
}
header .container .col-md-4 .shopping button:hover{
background-color: white;
color: orange;
border: 1px solid orange;
}
.banner {
width: 100%;
height: 500px;
background: #f2f6f7;
}
.banner .container .col-md-4{
height: 500px;
padding-left: 0;
text-align: left;
position: relative;
}
.banner .container .col-md-4 div{
position: absolute;
top: 50%;
margin-top: -87px;
left: -2%;
}
.banner .container .col-md-4 div p:nth-child(1){
font-size: 50px;
}
.banner .container .col-md-4 div p span:nth-child(1){
color: #5D4B33;
}
.banner .container .col-md-4 div p span:nth-child(2){
color: orange;
}
.banner .container .col-md-4 div p:nth-child(2){
color: orange;
font-size: 20px;
}
.banner .container .col-md-4 div button{
width: 180px;
height: 40px;
margin-top: 15px;
border: 5px solid #5D4B33;
font-weight: bold;
background: white;
outline-style: none;
}
.banner .container .col-md-4 div button:hover{
color: orange;
border-color: orange;
}
.banner .container .col-md-4 img{
margin-top: 100px;
}
/*gallery*/
.gallery .container .col-md-3 img{
width: 100%;
height: 100%;
border: 1px solid gray;
}
.gallery .container .col-md-8 img,
.gallery .container .col-md-4 img{
width: 100%;
height: 100%;
}
.gallery .container .glyphicon-eye-open{
width: 100%;
height: 50px;
background-color: rgba(0,0,0,0.7);
color: white;
text-align: left;
padding-left: 10px;
line-height: 50px;
transform: translateY(-52PX);
}
.fade{
visibility: hidden;
}
.gallery .container .glyphicon-eye-open a{
color: white;
}
.gallery .container .glyphicon-eye-open a:hover{
text-decoration: none;
}
.gallery .container .glyphicon-eye-open button{
width: 100px;
height: 30px;
border: 2px solid white;
background: none;
outline-style: none;
text-align: center;
line-height: 25px;
float: right;
margin-top: 10px;
margin-right: 20px;
font-weight: bold;
font-size: 12px;
}
.gallery .container .glyphicon-eye-open button:hover{
border-color: orange;
color: orange;
}
.gallery .container dl dd:nth-of-type(2){
margin-top: -30px;
font-weight: bold;
}
.gallery .container dl dd:nth-of-type(3){
margin-top: 10px;
}
.gallery .container dl dd span:last-of-type{
float: right;
}$(document).ready(function(){
$('.first').mouseenter(function(){
$('.search').show();
$('.first .glyphicon-triangle-top').show();
}).mouseleave(function(){
$('.search').hide();
$('.first .glyphicon-triangle-top').hide();
});
$('.second').mouseenter(function(){
$('.loginInfo').show();
$('.second .glyphicon-triangle-top').show();
}).mouseleave(function(){
$('.loginInfo').hide();
$('.second .glyphicon-triangle-top').hide();
});
$('.third').mouseenter(function(){
$('.shopping').show();
$('.third .glyphicon-triangle-top').show();
}).mouseleave(function(){
$('.shopping').hide();
$('.third .glyphicon-triangle-top').hide();
});
//console.log($('.gallery .container img'));
//console.log($('.gallery .container .glyphicon-eye-open'));
$('.gallery .container img').mouseenter(function(event){
//console.log(this);
console.log(event.target.parentNode.next('dd'));
})
});45
收起
正在回答 回答被采纳积分+1
2回答
相似问题
登录后可查看更多问答，登录/注册
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星