CSS如何扩大点击区域

区域"/>

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上设置了绝对定位，这样的话伪元素就盖在宿主元素上面了。
由此我们可以看出，伪元素的解决方案极为灵活，我们基本上可以把热区设置为任何想要的尺寸、位置或者形状，甚至可以脱离元素原有的位置。

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