06-[案例1]鼠标移出移入控制二维码的显示与隐藏

需求：当鼠标移到导航栏时，在导航栏下方显示出企业logo/二维码

知识点：display:none和block之间的应用

<div>
	<img src="../day05/wolong/images/logo_03.jpg" alt="">
</div>

div{
    width: 300px;
    height: 50px;
    background: skyblue;
    margin: 100px auto 0;
    /* 第一种方法：给父级设置文本溢出属性，但本案例中不适用 */
    /* overflow: hidden; */
    /* 第二种方法：给父级设置边框 */
    border: 1px solid transparent;
}
img{
    margin-top: 50px;
    /* 初始状态图片是隐藏的 */
    display: none;
}
div:hover img{
    display: block;
}

注意：
margin-top在图片出现后，会应用到img的父级元素，导致图片将导航栏覆盖住的情况，因此需要使用代码注释中对应的方法让图片出现在导航栏的下面。