CSS增大可选中区域

神树与鹿

于 2021-08-16 16:32:21 发布

阅读量307

点赞数

分类专栏：前端常见场景问题文章标签： css html 定位前端

本文链接：https://blog.youkuaiyun.com/weixin_45768768/article/details/119736220

版权

前端常见场景问题专栏收录该内容

7 篇文章

订阅专栏

问题场景：
在下图这种小按钮上，可能可点击区域太小，想要变大，但是又不想破坏样式。怎么办？
在这里插入图片描述
解决：

用的::after属性。

.swiper-pagination-bullet {
           /*
           *其他样式代码
           */
            position: relative; //设置为相对定位
        }
        .swiper-pagination-bullet::after {
            content: "";
            position: absolute; //设置为绝对定位
            left: 0px;
            top: -4px; 
            width: 16px;
            height: 16px; //这里自己设定，根据想要的位置，大小等等。。。。调试观察下！！合适即可
            opacity: 0; //透明度设为0
          }