区域"/>
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上设置了绝对定位,这样的话伪元素就盖在宿主元素上面了。
由此我们可以看出,伪元素的解决方案极为灵活,我们基本上可以把热区设置为任何想要的尺寸、位置或者形状,甚至可以脱离元素原有的位置。
非常的完美!!!
鼓掌!!!
更多推荐
CSS如何扩大点击区域
发布评论