css增加元素点击范围
有时候页面设计按钮较小,或着由于元素所在区域不适合放置大小,可以采用奇淫技巧(css)增加点击事件的触发范围。
比如页面中有一个按钮
<text id="gl1" bindtap="{{lettering}}"></text>
css代码:
#gl1{
text-align: center;
width: 24rpx;
height: 24rpx;
position: absolute;
top: 50%;
left: 22rpx;
border-left: 4rpx solid #FFFFFF;
border-bottom: 4rpx solid #FFFFFF;
-webkit-transform: translate(0,-50%) rotate(-135deg);
transform: translate(0,-50%) rotate(45deg);
}
#gl1::before{
content:"";
position:absolute;
top:-20rpx;
left:-20rpx;
bottom:-20rpx;
right:-20rpx;
}
css中的伪类可以增加元素事件的触发范围,但却可以做到不影响页面元素的排列,这点是伪类的一个实用小技巧