CSS如何扩大点击区域

CSS如何扩大点击区域

实现的效果：把点击区域扩大到红色区域。

<view class="agree">
        <text class="agree-radio {{isChecked?'agree-radio__checked':' '}}"></text>
        <text class="agree-text">同意</text>
        <navigator class="agree-link" url="#" hover-class="none">《协议协议协议协议》</navigator>
 </view>

方案一：

用透明色border + margin 负值实现

.icon {
    width: 40rpx;
    height: 40rpx;
    background: url(./8.png) no-repeat center center;
    background-size: 28rpx 28rpx;
    border: 6rpx solid red;
    border-left: 20rpx solid red;
    border-right: 60rpx solid red;
    margin-right: -52rpx;
}

最后把颜色red改成rgba(0,0,0,0)就可以啦！

方案二：

使用伪元素扩大可点击区域。

.icon {
	position: relative;
}
.icon::after {
    content: '';
    position: absolute;
    top: -6rpx;
    right: -30rpx;
    bottom: -6rpx;
    left: -20rpx;
    border: 2rpx solid green;
 }

伪元素可以代表其宿主元素来响应鼠标交互。我们可以在宿主元素的上层覆盖一层透明的伪元素，并让伪元素在上下左右四个方向上都比宿主元素大。这样的话我们的可点击区域就扩大了。
具体实现是在宿主元素上设置了相对定位，然后伪元素after上设置了绝对定位，这样的话伪元素就盖在宿主元素上面了。
由此我们可以看出，伪元素的解决方案极为灵活，我们基本上可以把热区设置为任何想要的尺寸、位置或者形状，甚至可以脱离元素原有的位置。

非常的完美！！！
鼓掌！！！