[CSS揭秘]扩大可点击区域

目的: 想给一个简单的小按钮扩大其热区在四个方向上均向外扩张10px

解决方案:

1. 常规的解决方案可能是设置一圈透明边框。

border: 10px solid transparent;

2. 但是如果按钮有背景色，那么边框很可能会扩大按钮的可视尺寸。于是可以采用background-clip属性将背景限制在padding-box区域内。

background-clip: padding-box;

3. 如果此时想给按钮添加边框效果如阴影效果，那么只能是添加内阴影。因为外阴影会加在border-box区域外侧。

box-shadow: 0 0 0 1px rgba(0,0,0, 0.3) inset;

4. 于是终极解决办法是使用伪元素(伪元素同样可以代表其宿主元素来响应鼠标的交互)

.button{

　　position: relative;
}

.button::after{

　　content: "";

　　position: absolute;

　　left: -10px;

　　top: -10px;

　　right: -10px;

　　bottom: -10px;

}

可以将伪元素设置为任何尺寸位置或形状甚至是脱离原来的位置

案例如下，或者参考网址 play.csssecrets.io/hit-area

+