1. 程式人生 > >css~使用css擴大可點選區域

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

只要有任何一個偽元素可用,這個方法就可以發揮作用,也不會干擾其他的效果,這個基於偽元素的解決方案極為靈活,我們可以把熱區設定為任何大小,任何形狀,任何位置。