css~使用css扩大可点击区域

根据Fitts法则，可以得出:目标越大，越容易到达。因此,对于那些较小的，难以瞄准的控件来说,如果不能把他的视觉尺寸直接扩大,将其可点击区域扩大也能提高用户体验。

1 只是一个单纯图标时，设置一层透明边框

border:10px solid transparent;
background-clip:padding-box;
 
 
1
2
 
 
1
2

2 当点击元素旁有其他元素时，使用第一种办法可能会导致其他元素位置改变，显然不行，这时我们可以使用使用伪元素 
我们可以在按钮的上层覆盖一层透明的伪元素，并让伪元素在4个方向上都比宿主元素大

button{
position:relative;
// 其他样式
}
button::before{
content:"";
position:absolete;
top:-10px;
left:-10px;
bottom:-10px;
right:-10px;
}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
 
 
1
2
3
4
5
6
7
8
9
10
11
12

只要有任何一个伪元素可用，这个方法就可以发挥作用，也不会干扰其他的效果，这个基于伪元素的解决方案极为灵活，我们可以把热区设置为任何大小，任何形状，任何位置。