扩大按钮点击范围

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中的伪类可以增加元素事件的触发范围,但却可以做到不影响页面元素的排列,这点是伪类的一个实用小技巧

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值