<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style type="text/css">
.con{
position: relative;
/* */
}
.box {
width: 200px;
height: 300px;
margin: 50px auto 0;
border: 1px solid #000;
/*position: relative;*/
}
/* 后代选择器 将图片完整放在框中*/
.box img{
width:200px;
height: 300px;
}
.box .pic{
width: 200px;
height: 200px;
background-color:#000;
color:#fff;
position: absolute;
/*子元素开启绝对定位时 父元素也应该开启相对定位*/
left: 200px;
top: 0px;
transition: all 500ms ease;
/*transition: all 1s cubic-bezier(0.28, -0.56, 0.755,1.445);*/
/*动态图*/
background-color: rgb(0,0,0,0.5);
display: none;
}
.box:hover .pic{
/*top:150px;*/
/* 字体上升*/
display: block;
/* 鼠标移入显示*/
}
/*面试题
当鼠标出了图片范围为什么文字还显示？
hover包括图片和文字说明
hover服务于父元素
*/
.box .pic p {
margin: 20px;
line-height: 20px;
/* 拉高文字间距*/
}
</style>
</head>
<body>
<div class="con">
<div class="box" >
<img src="1.jpg" alt="玫瑰花">
<div class="pic">
<p>
图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花
</p>
</div>
</div>
<div class="box" >
<img src="1.jpg" alt="玫瑰花">
<div class="pic">
<p>
图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花
</p>
</div>
</div>
</div>
</body>
</html>
