css实现鼠标悬停时元素的显示与隐藏

css实现鼠标悬停时元素的显示与隐藏

跟着B站黑马学习小兔鲜项目，有个点记录一下

就是当鼠标悬浮在商品列表上时，列表中的商品会显示出来，离开时，商品隐藏，如下：

感觉这个功能经常会遇到，但一直没弄明白具体怎么实现的，现在仔细学习了一下，总算搞清楚了

先上代码

上面是完整代码，关键在于layer的样式

首先看正常情况下，鼠标未悬浮时layer的样式

.layer {
 	width: 990px;
    height: 500px;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 250px;
    top: 0;
    display: none;
    padding: 0 15px;
}

display:none;实际上就是隐藏元素

再看看悬浮时layer的样式：

            // 关键样式  hover状态下的layer盒子变成block
            &:hover {
                .layer {
                    display: block;
                }
            }

注意，悬浮是悬浮在layer的父元素也就是menu上，悬浮时，设置display:block；即可展示layer

总结一下：

• display: none;隐藏元素
• display:block;显示元素，悬浮时设置