[CSS揭秘]擴大可點擊地區

標籤：解決方案   元素   style   relative   案例   設定   clip   響應   button   

目的: 想給一個簡單的小按鈕擴大其熱區在四個方向上均向外擴張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

+

[CSS揭秘]擴大可點擊地區