父元素遮住子元素的问题

父元素遮住子元素的问题

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

为两部分，第一部分橘色是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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。