clip-path解决overflow:hidden隐藏绝对定位子元素仍然可以点击的问题

项目中遇到的问题我们需要一个圆形的点击区域

<style>
    body {
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .center {
        width: 200px;
        height: 200px;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
        border-radius: 50%;
        overflow: hidden;
        background: #000;
        cursor: pointer;
        position: absolute;
        cursor: pointer;
        display: flex;
    }
</style>

<body>
    <div class="center">
    </div>
</body>

效果:

可以看到只有圆形里面才可以点击,完美

当然,不可能只是让你做这个的,如果往里面加点东西,我们需要一个absolute定位的元素

<style>
    body {
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .center {
        width: 200px;
        height: 200px;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
        border-radius: 50%;
        overflow: hidden;
        background: #000;
        cursor: pointer;
        position: absolute;
        cursor: pointer;
        display: flex;
    }

    .center div {
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        position: absolute;
        font-size: 1.5em;
    }
</style>

<body>
    <div class="center">
        <div></div>
    </div>
</body>

再开看看效果:

虽然显示的是圆形,但是可点击区域确实原来的整个父元素,也就是一整个正方形都可以被点击. 看到这个我当时是十分惊讶的,查百度都是说能不能隐藏的问题,而不是隐藏后能不能点击这类问题.

好了,怎么解决呢,总得解决的吧,一开始想不用绝对的定位就行了,但是呢,写都写了,不用是不可能的.直到我看到了clip-path属性. 看看兼容性: 好,ie都不支持,所以大家团结一点,不兼容ie吧.所以大家选择这个属性的时候要考虑一下兼容性吧.

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。语法的话大家去查吧,就不贴了.

加上clip-path

<style>
    body {
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .center {
        width: 200px;
        height: 200px;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
        border-radius: 50%;
        overflow: hidden;
        background: #000;
        cursor: pointer;
        position: absolute;
        cursor: pointer;
        display: flex;
        clip-path: circle(50% at 50% 50%);
    }

    .center div {
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        position: absolute;
        font-size: 1.5em;
    }
</style>

<body>
    <div class="center">
        <div></div>
    </div>
</body>

再看看效果:

ok,搞定,收工!

对了,自己写太麻烦了,贴个网址,快捷生成

clippy