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

最新推荐文章于 2023-11-02 16:25:02 发布

可乐会唱歌

最新推荐文章于 2023-11-02 16:25:02 发布

阅读量3.2k

点赞数 4

分类专栏：前端 css 文章标签：前端 css

本文链接：https://blog.csdn.net/huijiahekele/article/details/82386623

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

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

<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

可乐会唱歌

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
clip-path解决overflow:hidden隐藏绝对定位子元素仍然可以点击的问题

项目中遇到的问题我们需要一个圆形的点击区域&amp;amp;lt;style&amp;amp;gt; body { width: 100%; height: 100%; position: absolute; } .center { width: 200px; height: 200px; lef...
复制链接

扫一扫

专栏目录