首页 > 代码库 > [CSS揭秘]扩大可点击区域
[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
<style></style>+
[CSS揭秘]扩大可点击区域
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。