html – 使可链接的在线链接区域更大,而不影响布局

发布时间：2020-12-14 19:00:32 所属栏目：资源来源：网络整理

导读：我希望使链接的可点击区域大于实际可访问性,因为对于预期的用户来说,可能难以击中它们.大约1.5倍的大小可能是适当的.这些是正常文本中的链接,所以我实际上不能使它们更大,这会弄乱布局. 我使用HTML5,CSS3,JS甚至Mozilla的具体功能来完成这一点,因为最新的Fir

我希望使链接的可点击区域大于实际可访问性,因为对于预期的用户来说,可能难以击中它们.大约1.5倍的大小可能是适当的.这些是正常文本中的链接,所以我实际上不能使它们更大,这会弄乱布局.

我使用HTML5,CSS3,JS甚至Mozilla的具体功能来完成这一点,因为最新的Firefox版本是唯一的目标,虽然基本的CSS / HTML而不是这样的黑客当然会更好！

一个可能工作的选项是使用：after伪元素.这样的事情

a {
    position: relative
}
.bigger:after{
    content:"";
    padding: 50px;  
    position: absolute;
    left: -25px;
    top: -25px;
}

数字可以根据需要进行调整.只有不足之处,我可以立即看到,如果您需要支持IE8之前的任何事情. http://caniuse.com/#feat=css-gencontent

这是一个fiddle.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!