父元素遮住子元素的问题

这是一种样式实现方法，可能存在问题，做个笔记方便以后看

为两部分，第一部分橘色是parent，蓝色是children

hover时候，children出现 

效果图：

原理实现 ：

.header .gwc{
    margin-right: 98px;
    background-color: #fff;
    float: right;
    margin-top: -60px;
    border: 1px solid #e3e4e5;
    color: #f10215;
    line-height: 35px;
    text-align: center;
    font-size: 12px;
    width: 190px;
    position: relative;

} 
.header .gwc:hover{ 
　　　　border-color:#ccc; 
　　　　border-bottom: 2px solid #fff;
      用白色的变遮住下面子元素灰色的边，实现不规则图形描边
 }

　　子元素：

.header .gwc:hover .gwc_box{
    display: block;
}
.header .gwc_box{
    display: none;
    position: absolute;
    width: 310px;
    height: 70px;
    border: 1px solid #ccc;
    bottom: -70px;
    right: -1px;
    box-sizing: border-box;
    padding: 10px;
    z-index:-1;必须为负值 父级元素才会显现上来
    background-color: #fff;
}

　　这样就完成了 

hover 

 

转载于:https://www.cnblogs.com/GoTing/p/7225965.html