父元素遮住子元素的问题

CSS hover效果实现

最新推荐文章于 2022-10-20 19:14:49 发布

weixin_30827565

最新推荐文章于 2022-10-20 19:14:49 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/GoTing/p/7225965.html

本文介绍了一种使用CSS实现hover效果的方法。通过设置.parent和.children元素的样式，当鼠标悬停在.parent上时，.children元素会显示出来。该技巧利用了相对定位和绝对定位结合的方式，并调整了z-index确保正确显示。

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

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